我在一个HTML页面上有2个按钮组。每组3到4个按钮（使用引导程序的按钮）。我想使用Javascript在没有onclick的情况下更改点击时的颜色按钮。
null
.show {
display : block;
}
.btn-group {
margin-top : 20px;
overflow : hidden;
}
.btn {
font-weight : bold;
color : white;
border : none;
outline : none;
padding : 12px 16px;
/*blue*/
background-color : #2c75ff;
cursor : pointer;
}
.btn:hover {
font-weight : bold;
color : white;
/*green*/
background-color : #85c995;
}<div class="row">
<div class="column" style="width:30%">
<div class="btn-group" >
<button type="button" class="btn btn-primary" style="outline-color:red; ">Sunday</button>
<button type="button" class="btn btn-primary" >Tuesday</button>
<button type="button" class="btn btn-primary" >Friday</button>
</div>
</div>
<div class="column" style="width:70%">
<div class="btn-group" >
<button type="button" class="btn btn-primary" >9 am</button>
<button type="button" class="btn btn-primary">2 pm</button>
<button type="button" class="btn btn-primary">5 pm</button>
<button type="button" class="btn btn-primary" >8 pm</button>
</div>
</div>
</div>null
首先，给第一组按钮一个ID，如下所示：
<div class="row">
<div class="column" style="width:30%">
<div class="btn-group" id="btn-group-a">
<button type="button" class="btn btn-primary" style="outline-color:red; ">Sunday</button>
<button type="button" class="btn btn-primary" >Tuesday</button>
<button type="button" class="btn btn-primary" >Friday</button>
</div>
</div>
<div class="column" style="width:70%">
<div class="btn-group" >
<button type="button" class="btn btn-primary" >9 am</button>
<button type="button" class="btn btn-primary">2 pm</button>
<button type="button" class="btn btn-primary">5 pm</button>
<button type="button" class="btn btn-primary" >8 pm</button>
</div>
</div>
</div>
现在，我们可以使用JavaScript中的foreach循环为该组中的每个按钮分配事件侦听器。
如果您已经有一个.js文件，下面的代码可以进入其中。否则，在HTML末尾创建一个标记，并将其添加到其中。
const groupA = document.querySelector("#btn-group-a");
// get our div with buttons
const groupABtns = groupA.querySelectorAll("button");
// select all of our buttons within this div
// Loop through our array of buttons, and add a click event for each
groupABtns.forEach(btn => {
addEventListener("click", () => {
btn.style.backgroundColor = 'green'
});
})
这将循环遍历第一组中的按钮数组，并为每个按钮添加一个事件侦听器。现在，每个按钮都将有一个style属性设置，该属性将其背景颜色更改为绿色。
我希望这就是你想要的。
**还需要注意的是，这并不是“选择”任何按钮，而是将按钮的颜色改为绿色。这个功能会稍微复杂一些。**
