修改W3Schools激活按钮示例：事件监听内条件判断无输出

问题根源 #

你的代码在初始状态下没有任何按钮带有active类，第一次点击按钮时，document.getElementsByClassName("active")返回空集合，此时访问current[0].classList会直接触发未定义错误，导致后续逻辑完全无法执行。另外，直接拼接字符串修改className也容易出现类名重复的问题。

修复方案 #

1. 先判断是否存在已激活的按钮（即current集合长度是否大于0），再执行移除操作
2. 使用classList.add()和classList.remove()操作类名，更安全可靠
3. 可选：如果需要点击已激活按钮时取消其激活状态，可添加对应判断逻辑

修复后的完整代码 #

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* Style the buttons */
        .btn {
            border: none;
            outline: none;
            padding: 10px 16px;
            background-color: #f1f1f1;
            cursor: pointer;
            font-size: 18px;
        }

        /* Style the active class, and buttons on mouse-over */
        .active,
        .btn:hover {
            background-color: #666;
            color: white;
        }
    </style>
</head>
<body>
    <h1>Active Button</h1>
    <p>Highlight the active/current (pressed) button.</p>

    <div id="myDIV">
        <button class="btn">1</button>
        <button class="btn">2</button>
        <button class="btn">3</button>
    </div>

    <script>
        // Add active class to the current button (highlight it)
        var header = document.getElementById("myDIV");
        var btns = header.getElementsByClassName("btn");

        for (var i = 0; i < btns.length; i++) {
            btns[i].addEventListener("click", function () {
                var current = document.getElementsByClassName("active");
                // 移除已存在的激活状态
                if (current.length > 0) {
                    current[0].classList.remove("active");
                }
                // 切换当前按钮的激活状态（可选逻辑：点击已激活按钮取消状态）
                if (this.classList.contains("active")) {
                    this.classList.remove("active");
                } else {
                    this.classList.add("active");
                }
            });
        }
    </script>
</body>
</html>

代码说明 #

• 每次点击按钮时，先检查是否有已激活的按钮，若有则移除其active类
• 可选逻辑：判断当前按钮是否已激活，是则取消激活，否则添加激活类（不需要此逻辑可直接删除判断，只保留this.classList.add("active")）
• 使用classList方法操作类名，避免字符串拼接的潜在错误，逻辑更直观

内容的提问来源于stack exchange，提问作者Coddy