更改一个按钮的背景颜色 onClick 并将之前单击的按钮恢复为默认背景（8 个按钮）

Question

我有一列 8 个按钮，一次只希望切换一个按钮（黄色），其余按钮保持默认（绿色）。我有一段时间让功能在点击时执行。意思是没有颜色在改变。

我一直在用这个post 作为我的参考，并帮助我理解了 querySelectors 和更改类但对于我的生活，我无法理解为什么我的应用程序无法正常工作。 Console.log('test) 在调用 for 循环后立即触发，但如果放在 onClick 下方则不会触发。

JS

for (button in buttons) {
    buttons[button].onclick = function() {
        console.log('test')
        var yellowButton = document.querySelectorAll(".yellow")[0];
        if (this.className == "green") {
            if (yellowButton) yellowButton.className = "green";
            this.className = "yellow";
        }
    }
}

HTML

            <button class="green">UPKEEP</button>
            <button class="green">DRAW</button>
            <button class="green">MAIN</button>
            <button class="green">COMBAT</button>
            <button class="green">MAIN</button>
            <button class="green">END TURN</button>
            <button class="green">CLEANUP</button>

CSS

button{
    width: 100%;
    padding: 10px 20px;
    margin: 3px;
}

.green{
    background-color: green;
}

.yellow {
    background-color: yellow;
}

我希望有 1/8 的按钮是黄色的。那是被点击的按钮。

Answer 1

我设法使您的代码正常工作。 jsFiddle

确保您正确定义 buttons：

var buttons = document.querySelectorAll(".green");

Answer 2

无需切换黄色和绿色 classes - 您只需在单击时添加 'highlight' class 并将其从先前单击的按钮中删除。

此突出显示 class 具有黄色背景样式，因此当您单击按钮时，它会添加突出显示 class 和黄色背景。然后单击另一个按钮从第一个按钮中删除突出显示 class 并将其应用于单击的按钮。

 var buttons = document.querySelectorAll("button");
 
 for (button in buttons) {
    buttons[button].onclick = function() {
        console.log('test')
        buttons.forEach(function(btn){
          btn.classList.remove('highlight');
        })
        this.classList.add('highlight');
    }
}

button{
    width: 100%;
    padding: 10px 20px;
    margin: 3px;
}

.green{
    background-color: green;
}

.highlight {
    background-color: yellow;
}

<button class="green">UPKEEP</button>
<button class="green">DRAW</button>
<button class="green">MAIN</button>
<button class="green">COMBAT</button>
<button class="green">MAIN</button>
<button class="green">END TURN</button>
<button class="green">CLEANUP</button>

Answer 3

我的问题出在 html，我不得不将脚本标记移到正文的末尾以允许循环发生。感谢大家的帮助！

更改一个按钮的背景颜色 onClick 并将之前单击的按钮恢复为默认背景（8 个按钮）

Change one button background color onClick and revert previously clicked button to default background (8 Buttons)

javascript

css

node.js

express

nodemon