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

【问题标题】：Change one button background color onClick and revert previously clicked button to default background (8 Buttons)onClick 更改一个按钮的背景颜色并将先前单击的按钮恢复为默认背景（8 个按钮）
【发布时间】：2019-12-28 05:46:00
【问题描述】：

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

我一直在用这个帖子How to select and change color of a button and revert to original when other button is clicked 作为我的参考，并帮助我理解了 querySelectors 和更改类，但对于我的生活，我无法理解为什么我的应用程序无法正常工作。 Console.log('test) 在调用 for 循环后立即触发，但如果放在 onClick 下方则不会触发。

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 的按钮是黄色的。那就是被点击的按钮。

【问题讨论】：

您的代码似乎按预期工作：jsfiddle.net/4ez70dyt 页面上的其他内容可能会破坏它吗？
@Gavin，您是否添加了第一行 let buttons = document.getElementsByTagName('button'); 以使其正常工作？这就是我们所需要的。
我做到了。对不起，我以为你故意省略了它！
我试过了，但仍然没有得到预期的结果。我在项目中使用 express、nodemon、nodeJS 和 path。如果有帮助，我可以链接 github 链接
@Gavin，我直接使用了 fiddle 中的代码，但它仍然无法在服务器中使用。如果我使用 express 服务，我是否必须在函数执行后重新加载和保留？

标签： javascript css node.js express nodemon

【解决方案1】：

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

确保您正确定义buttons：

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

【讨论】：

【解决方案2】：

而不是切换黄色和绿色类 - 您只需在点击时添加一个“突出显示”类并将其从之前点击的按钮中删除。

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

 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>

【讨论】：

我试过了，但仍然没有得到预期的结果。我在项目中使用 express、nodemon、nodeJS 和 path。如果有帮助，我可以链接 github 链接

【解决方案3】：

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

【讨论】：