单击按钮JS时添加和删除边框

Question

你好，我正在努力使用JS，以便在单击HTML页面上的按钮时为按钮添加边框，并在再次单击时删除边框。它适用于前2次点击，但之后不再执行任何操作。请原谅我的js我非常缺乏经验。

JavaScript:

<script>
var flag = true;
var buttons = document.getElementsByClassName("btn");
function buttonFunction() {
if (flag) {
for (var i = 0; i < buttons.length; i++) {
document.getElementsByClassName("btn")[i].addEventListener("click", function() {
this.classList.add("buttonSelect");
flag = false
return
});
}
} else {
if (flag == false) {
for (var i = 0; i < buttons.length; i++) {
document.getElementsByClassName("btn")[i].addEventListener("click", function() {
this.classList.add("buttonUnselect");
flag = true
return
});
}
}
}
}
</script>

Answer 1

真正的问题是添加这两个类，而从不删除它们。去掉if else语句，只需在单击时切换类。也不需要将循环封装在函数中。只需让javascript在运行时执行事件侦听器。

此外，请使用您创建的buttons变量，而不是尝试再次查询DOM中的相同元素。

<script>
var buttons = document.getElementsByClassName("btn");
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function() {
this.classList.toggle("buttonSelect");
})
}
</script>