我有一系列按钮，分别以绿色和红色显示所有选中的按钮。单击另一个按钮时，该按钮变为绿色，而先前选择的按钮变为红色。我可以通过在按钮上添加onclicks来使其正常工作，但我宁愿通过事件侦听器来完成此操作。这就是我卡住的地方。我怀疑对“这”有更好的理解会有所帮助，但是我尝试过的变体却失败了。
这是我当前没有事件监听器的工作代码。
let boxes = document.getElementsByClassname("box");
function toggleSelection(el) {
Array.from(boxes).forEach(box => {
box.style.backgroundColor = 'red';
})
el.style.backgroundColor = 'green';
}.box {
display: inline-block;
height: 100px;
width: 100px;
border: 1px dashed black;
}
.deselected {
background-color: red;
}
.selected {
background-color: green;
}<div class="container">
<div class="box selected" onclick="toggleSelection(this)">1</div>
<div class="box deselected" onclick="toggleSelection(this)">2</div>
<div class="box deselected" onclick="toggleSelection(this)">3</div>
<div class="box deselected" onclick="toggleSelection(this)">4</div>
</div>
感谢您的帮助！