JavaScriptのtextContentプロパティに関する問題

Question

現在模写コーディングをしていてjsでtextContentプロパティを使用し
クリック時にテキストを変更するようにしたのですが、
cssで設定したfont-familyが初期化されてしまいます。
何か対処法はありますでしょうか

let soundbutton = document.getElementsByClassName("sound")；

soundbutton[0].onclick = () => {
soundbutton[0].textContent = "sound on";
soundbutton[0].style.fontFamily = "Exo, Noto Sans JP, Arial, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo, sans-serif";
};

↑現在のコードです、どうかご教授お願い致します。

Comments

[maisumakun]

> cssで設定したfont-familyが初期化されてしまいます。

それは、どのような方法で確認して、どのような状態になっていたのでしょうか？

[int32_t]

状況がよくわかりません。

> cssで設定したfont-familyが初期化されてしまいます

クリック前にどういう状態で、クリック後にどうあるべきで、実際はどうなっているのでしょうか。

[aiaiiii]

ご回答ありがとうございます！
現在クリック前はfont-familyが適応されていて、クリック後には適応されていません。
sound onに切り替わると初期値って感じです。

理想は切り替わり後にもfont-familyを適応させたいです。

[int32_t]

> 理想は切り替わり後にもfont-familyを適応させたいです。

ボタンをクリックしてもフォントは変化しないで欲しい、ということでしょうか?

[aiaiiii]

はい！仰る通りです。

Answer 1

ご質問の状況が再現できないので以下お試しください
webフォントなどでない限り極端なfontfamilyは環境に依存しますのであまり手のこんだことはおすすめしません

<div class="sound">test1</div>
<div class="sound">test2</div>
<div class="sound">test3</div>
<script>
let soundbutton = document.getElementsByClassName("sound");
soundbutton[0].onclick = () => {
  soundbutton[0].textContent = "sound on";
  soundbutton[0].style.fontFamily = "monospace";
};
</script>

※上記test1のみ反応し等幅フォントになる

Comments

[aiaiiii]

回答ありがとうございます！
上記を参考にfont-familyの種類を絞ったらfont-familyを適応する事が出来ました！
本当にありがとうございました。

Answer 2

soundbutton[0].style.fontFamily = "Exo, Noto Sans JP, Arial, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo, sans-serif";

この行を消すと、クリック時にフォントが変わらなくなると思います。

Comments

[aiaiiii]

ご回答ありがとうございます！！
仰る通り消してよくよく見たらフォント同じなままでした。。。

大文字から小文字に切り替わったことでてっきりfont-familyが変わったのかと勘違いしてました、
この世のすべてを理解した気分になれました！本当に本当にありがとうございました！！