我在这里阅读了一些与我的问题相似的答案，但我仍然不明白发生了什么。
我有这个JS代码段：
function renderButtons() {
let buttonCollection = document.getElementsByClassName("btn");
let arrayOfBtn = [...buttonCollection];
arrayOfBtn.forEach(function(element) {
function modifyClass() {
element.classList.toggle("active");
}
element.addEventListener("click", modifyClass);
})
}
这是为了在单击class时添加/删除button的“活动”。
这是HTML：
<div class="panel controls">
<ul>
<li>
<button class="btn btn-pepperonni active">Pepperonni</button>
</li>
<li>
<button class="btn btn-mushrooms active">Mushrooms</button>
</li>
<li>
<button class="btn btn-green-peppers active">Green peppers</button>
</li>
<li>
<button class="btn btn-sauce active">White sauce</button>
</li>
<li>
<button class="btn btn-crust active">Gluten-free crust</button>
</li>
</ul>
</div>
并且确实有效，问题在于，我每次必须在button上单击两次，才能特别添加或删除该按钮的class。
任何帮助将不胜感激。
非常感谢！
您的JS必须在HTML的末尾加载。您的HTML会将内容从顶部加载到底部。因此，您的Scirpt希望访问“ btn”元素，这些元素目前尚未生成。
首先是HTML，然后是JS。
对于这样的短函数，您可以如下使用内联函数。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div class="panel controls">
<ul>
<li>
<button class="btn btn-pepperonni active">Pepperonni</button>
</li>
<li>
<button class="btn btn-mushrooms active">Mushrooms</button>
</li>
<li>
<button class="btn btn-green-peppers active">Green peppers</button>
</li>
<li>
<button class="btn btn-sauce active">White sauce</button>
</li>
<li>
<button class="btn btn-crust active">Gluten-free crust</button>
</li>
</ul>
</div>
</body>
<script>
var buttonCollection = document.getElementsByClassName("btn");
for (var i = 0; i < buttonCollection.length; i++)
{
buttonCollection[i].addEventListener("click", function(){
this.classList.toggle("active");
});
}
</script>
</html>
由于先前的答案已经显示了如何解决您的原始代码，我试图找到您想要做的简化版本。
[在我的解决方案中，我正在使用“委托事件绑定”：click事件绑定到父<div>元素，并且仅当实际的click目标为btn类时才触发。这种方法适用于在绑定时尚未创建的元素。而且它更“轻巧”，因为只有一个绑定。
document.querySelector("div.panel.controls")
.addEventListener("click",function(ev){
var cl=ev.target.classList;
if (cl.contains("btn")) cl.toggle("active");
});.active {background-color: #fcc}<div class="panel controls">
<ul>
<li>
<button class="btn btn-pepperonni active">Pepperonni</button>
</li>
<li>
<button class="btn btn-mushrooms active">Mushrooms</button>
</li>
<li>
<button class="btn btn-green-peppers active">Green peppers</button>
</li>
<li>
<button class="btn btn-sauce active">White sauce</button>
</li>
<li>
<button class="btn btn-crust active">Gluten-free crust</button>
</li>
</ul>
</div>编辑：
删除RenderButtons函数，而是在每种成分上单击如下所示的按钮后，切换“活动”类：
document.querySelector('.btn.btn-pepperonni').onclick = function() {
state.pepperonni = !state.pepperonni;
renderEverything()
this.classList.toggle("active");
}
基本上，您要做的是在按钮上调用两个onclick事件，它们不会一起起作用。另外，您也过度使用RenderButtons函数使整个过程复杂化：）
希望有帮助！