ボタンをクリックすると該当のボタンの色を変える方法

実現したいこと

横並びのボタンをクリックすると、ボタンの色がCSSで指定の色に変化する
別のボタンを押下すると、元々押下したボタンの色が戻っている

前提

HTML内にJavascriptのコードを<script>内に記します。
横並びに配置されたボタン３つは、クリックすると該当のボタンが色を変え、また別のボタンを押下すると最初に色が変わったボタンは色が戻り、新たに押下したボタンの色が変わる、という流れを組み込みたいです。
CSSにはボタンを押す前の色と押した後の色もそれぞれ記しています。
ボタン一個だけであれば色を変えることができるのですが、class単位で動かそうとすると動作が反応しなく、原因がわからない状態です。
jQueryは今回使用しないです。
初歩的な質問で恐縮ですが、idgetElementByIdで動いたものが、getElementsByClassNameだと動作が反応しないのがどうしてなんかがわからなくて困っています。

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

検証で押してもエラーが出ないです。

該当のソースコード

HTML
1<div id="wrapper">
2        <div id="button1" class="button">
3            <p>button</p>
4        </div>
5
6        <div id="button2" class="button">
7            <p>button</p>
8        </div>
9
10        <div id="button3" class="button">
11            <p>button</p>
12        </div>
13    </div>

Javascript
1   <script>
2        function buttonClick(n) {
3            document.getElementsByClassName("button").classList.toggle("on");
4        }
5
6        let button = document.getElementsByClassName("button");
7        button.onclick = buttonClick;
8
9    </script>

CSS
1.button {
2    margin: 0 20px;
3    width: 300px;
4    height: 150px;
5    background-color: #fdd;
6    cursor: pointer;
7}
8/* ボタン押下時 */
9.on {
10    background-color: #f00;
11}
12
13.button p {
14    line-height: 180px;
15    font-size: 32px;
16    text-align: center;
17}

試したこと

行動規範の内容に同意します

回答2件

今回のケースは排他的にonが設定されるようなので、ループ処理は不要ですね

javascript
1<script>
2document.addEventListener('click',({target})=>{
3  const b=target.closest('.button');
4  if(b){
5    document.querySelector('.button.on')?.classList.remove('on');
6    b.classList.add('on');
7  }
8});
9</script>
10<div id="wrapper">
11<div class="button">
12<p>button</p>
13</div>
14<div class="button">
15<p>button</p>
16</div>
17<div class="button">
18<p>button</p>
19</div>
20</div>

投稿2023/06/24 16:43

yambejp

総合スコア117755

roadhog_fun

2023/07/16 04:56

別でいただいている自動生成回答は間違いで、こちらの記述が正しいという認識でしょうか？ querySelectorにてCSSから取得する方が簡潔に見えますね。ありがとうございます。

行動規範の内容に同意します

ベストアンサー

この回答はGPT-4による自動生成回答です

getElementsByClassNameは複数の要素を返すため、それぞれの要素に対してイベントリスナーを設定する必要があります。以下のように修正してみてください。

javascript
1<script>
2    function buttonClick() {
3        // すべてのボタンの色をリセット
4        let buttons = document.getElementsByClassName("button");
5        for (let i = 0; i < buttons.length; i++) {
6            buttons[i].classList.remove("on");
7        }
8        // クリックされたボタンの色を変更
9        this.classList.toggle("on");
10    }
11
12    let buttonElements = document.getElementsByClassName("button");
13    for (let i = 0; i < buttonElements.length; i++) {
14        buttonElements[i].addEventListener("click", buttonClick);
15    }
16</script>