HTML按钮双点击事件失效，求实现两次点击切换文本方案

你在按钮上重复定义了两个onclick属性，这在HTML里是不被允许的——浏览器解析时只会保留最后一个重复属性（部分浏览器可能保留第一个，但无论哪种情况都没法实现你要的“第一次点击触发A，第二次点击触发B”的效果）。

下面给你两种可行的实现方案：

方案一：用计数器判断点击次数 #

通过一个变量记录点击次数，在同一个函数里根据次数执行不同逻辑：

<body>
    <button onclick="handleClick()" style="background-color: aquamarine;color:purple; font-size:40px;border-radius:100px;">Click Me!</button>

    <p style="color:red;font-size:80px;" id="test"></p>
    <script>
        let clickCount = 0;
        function handleClick(){
            clickCount++;
            const testText = document.getElementById("test");
            if(clickCount === 1){
                testText.innerHTML = "Why did you do what it said >:(";
            } else if(clickCount === 2){
                testText.innerHTML = "Stop it >:(";
            }
            // 要是需要循环触发或者更多点击逻辑，继续加条件就行
        }
    </script>
</body>

方案二：切换事件监听 #

第一次点击后移除原事件，绑定新的事件处理函数：

<body>
    <button id="myButton" style="background-color: aquamarine;color:purple; font-size:40px;border-radius:100px;">Click Me!</button>

    <p style="color:red;font-size:80px;" id="test"></p>
    <script>
        const button = document.getElementById("myButton");
        
        function dosomething(){
            document.getElementById("test").innerHTML = "Why did you do what it said >:(";
            // 移除当前点击事件，换成第二个函数
            button.removeEventListener('click', dosomething);
            button.addEventListener('click', dosomething2);
        }
        
        function dosomething2(){
            document.getElementById("test").innerHTML = "Stop it >:(";
            // 如果第二次点击后不想再触发任何动作，可以加上下面这行
            // button.removeEventListener('click', dosomething2);
        }
        
        // 页面加载完成后，先绑定第一个点击事件
        button.addEventListener('click', dosomething);
    </script>
</body>

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