Javascript 单击后更改一个按钮的背景色，并将以前单击的按钮还原为默认背景（8个按钮）

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

我一直在使用这个帖子 作为我的参考和帮助我了解查询选择器和改变课程，但就我的一生而言，我不明白为什么我的应用程序不起作用。

Console.log（'test）

在调用for循环后立即激发，但如果将其置于

onClick下，则不会激发

JS

HTML

我希望有1/8的按钮是黄色的。这是单击的按钮。
我设法使您的代码正常工作

确保正确定义
按钮
：

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

我设法让你的代码正常工作了

确保正确定义
按钮
：

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

与切换黄色和绿色类不同，您只需单击添加一个“highlight”类，然后将其从以前单击的按钮中删除即可

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


var buttons=document.querySelectorAll（“按钮”）；
用于（按钮中的按钮）{
按钮[button].onclick=function（）{
console.log（'test'）
按钮。forEach（功能（btn）{
btn.classList.remove（'highlight'）；
})
this.classList.add（'highlight'）；
}
}
按钮{
宽度：100%；
填充：10px 20px；
保证金：3倍；
}
格林先生{
背景颜色：绿色；
}
.亮点{
背景颜色：黄色；
}
保养
画
主要
战斗
主要
末端转弯
清理
而不是切换黄色和绿色类-您只需单击添加一个“突出显示”类，然后将其从先前单击的按钮中删除即可

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


var buttons=document.querySelectorAll（“按钮”）；
用于（按钮中的按钮）{
按钮[button].onclick=function（）{
console.log（'test'）
按钮。forEach（功能（btn）{
btn.classList.remove（'highlight'）；
})
this.classList.add（'highlight'）；
}
}
按钮{
宽度：100%；
填充：10px 20px；
保证金：3倍；
}
格林先生{
背景颜色：绿色；
}
.亮点{
背景颜色：黄色；
}
保养
画
主要
战斗
主要
末端转弯
清理
我的问题是在html中，我必须将脚本标记移动到正文的末尾，以允许循环发生。谢谢大家的帮助
 我的问题是在html中，我必须将脚本标记移动到正文的末尾，以允许循环发生。谢谢大家的帮助
 您的代码似乎按预期工作：页面上是否有其他内容可能会破坏它？@Gavin，您是否添加了第一行
let buttons=document.getElementsByTagName（'button'）让它工作吗？这就是我们需要的，我做了，是的。对不起，我以为你故意漏掉了！我确实试过了，但仍然没有达到预期的效果。我在项目中使用了express、nodemon、nodeJS和path。我可以链接github链接，如果helpful@Gavin，我直接使用了fiddle的代码，但它在服务器上仍然不起作用。如果我使用express，是否必须在函数执行后重新加载并保留？您的代码似乎按预期工作：页面上是否有其他内容可能会破坏它？@Gavin，您是否添加了第一行
let buttons=document.getElementsByTagName（'button'）让它工作吗？这就是我们需要的，我做了，是的。对不起，我以为你故意漏掉了！我确实试过了，但仍然没有达到预期的效果。我在项目中使用了express、nodemon、nodeJS和path。我可以链接github链接，如果helpful@Gavin，我直接使用了fiddle的代码，但它在服务器上仍然不起作用。如果我使用express提供服务，我是否必须在函数执行后重新加载和保留？我确实尝试了这一点，但仍然没有得到预期的结果。我在项目中使用了express、nodemon、nodeJS和path。我可以链接github-link，如果我确实尝试了这个，但仍然没有得到预期的结果。我在项目中使用了express、nodemon、nodeJS和path。如果有帮助，我可以链接github链接
button{
    width: 100%;
    padding: 10px 20px;
    margin: 3px;
}

.green{
    background-color: green;
}

.yellow {
    background-color: yellow;
}


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