クリックされた要素にクラスが追加されるようにしたい

Question

前提・実現したいこと

JavaScript の addEventListener と classList を使って、クリックされた要素にクラスが追加されるようにしたいのですが…。

発生している問題・エラーメッセージ

クリックしても、そのクラスに指定したスタイルが適用されません。

デベロッパーツールで確認すると、クラスは要素に追加されているのですが、スタイルのところに打消し線が引かれています。

該当のソースコード

<div id="btn">button</div>

#btn {
  background: #cfcece;
  font-size: 18px;
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}

.change {
  background: #d6a2a2;
}

'use strict';
{

const btn = document.getElementById('btn');

btn.addEventListener ('click', () => {
  btn.classList.add('change');
});

}

試したこと

今までに書いたコードや学習サイトなどにあるよく似た実装の見本コードをコピーして使ってみたところ、classList に関する処理は問題なく動作したのですが…。

イベントリスナーの中に「btn.textContent = 'hello!';」の処理を入れてみたところ、この処理は問題なく実行されました。ということは、イベント設定の書き方はこれで問題ないということだと思うのですが。

今回のこのコードの中で、どこに間違いがあるのでしょうか？
ご教示いただけると嬉しく思います。

補足情報（FW/ツールのバージョンなど）

ブラウザは Chrome の最新版です。

Answer 1

idとclassではidのスタイルが優先的に適用されるのでclassを追加しても意味ありません。
idは使わずにclassで対処してください。

基本的には以下のようなルールがありますが詳しくは「セレクタの詳細度」で調べてください。

• 「 タグ < class < id 」の順に詳細度が高くなり、優先順位が上がる。
• 「 外部参照 < 内部参照 < インライン指定 」の順に詳細度が高くなる。
• 子孫セレクタ等でセレクタが複数になっている場合はより詳しく指定されている方が優先される。

<div class="btn">button</div>

<style>
/* nav */
.btn {
  background: #cfcece;
  font-size: 18px;
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}

.change {
  background: #d6a2a2;
}
</style>


<script>
const btn = document.getElementsByClassName('btn');

btn[0].addEventListener ('click', () => {
  btn[0].classList.add('change');
});
</script>

Comments

[Yumiko]

ご教示ありがとうございます。

https://developer.mozilla.org/ja/docs/Web/CSS/Specificity を読んで「セレクタの詳細度」を確認して勉強しました。

今回は、id はスクリプト用、クラスはデザイン用に役割を分けて指定するようにして解決しました。

わかりやすい説明をありがとうございました！

Answer 2

とり急ぎの対症療法になりますが、!important を付加すればよいかと思います。

.change {
  background: #d6a2a2 !important;
}

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/jOPzQjp

追記

より良い改善案のひとつは、 <div id="btn"> の "btn" をidではなく、classにできないか検討して、できそうであれば以下のようにすることです。

<div class="btn">button</div>

.btn {
  background: #cfcece;
  font-size: 18px;
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}

.change {
  background: #d6a2a2;
}

  const btn = document.querySelector('.btn');

  btn.addEventListener ('click', () => {
    btn.classList.add('change');
  });

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/WNvzYVJ

追記2

ある要素に該当するセレクタを持つスタイルが複数あるとき、どれが優先されるのか？という優先順位は、CSSの詳細度（specificity)によって決まります。詳しくは以下を参照されるとよいでしょう。

• **MDN: **CSS: カスケーディングスタイルシート - 詳細度

Comments

[Yumiko]

ご教示ありがとうございます！
どちらの方法も試してみたら、うまくいきました。
追記してくださったように、CSS の詳細度を利用したスタイル付けをした方が良いのですね。

今回は、スクリプト用には id を付け、デザインのスタイル用にはクラスを付けて解決することにしました。

丁寧な説明をしてくださり、ありがとうございました。

[jun68ykt]

どういたしまして。
> どちらの方法も試してみたら、うまくいきました。
とのことでよかったです????