单击按钮 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

真正的问题是您同时添加了 class 而从未删除它们。去掉 if else 语句，只需在单击时切换 class。也不需要将循环包装在函数中。让 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>

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

Add and remove border when clicking on a button JS

javascript

button

onclick

border

undo