Question

我制作了一个按钮，应该每隔几秒就开始改变一些文本的颜色。代码DOES会改变颜色，但它会在页面加载时发生，并且不会等待用户单击按钮以更改颜色。这是我的代码。请向我解释并告诉我如何只在用户点击按钮时执行代码。

 <!DOCTYPE html>
<body>

<style>
#woo{
color: green;
}

#woot{
color: orange;
}
</style>

<button onClick="onChange()">SWAG</button>
<p id="woo">WAM</p>


<script>
setInterval(function(){onChange()}, 2000);


function onChange(){
    document.getElementById("woo").id = "woot";
    setTimeout(function(){
        document.getElementById("woot").id = "woo";
    }, 1000);
}

</script>
</body>
</html>

如果您能帮助回答我的问题，请执行。

Answer 1

只要您拨打setInterval()，就会要求浏览器每2秒执行一次onChange()，无论按钮如何。

尝试类似：

<style>
    #woo.green {
        color: green;
    }

    #woo.orange {
        color: orange;
    }
</style>

<button onClick="startChange()">SWAG</button>
<p id="woo" class="orange">WAM</p>
<script>
    var intervalRef;
    var green = false;

    function startChange() {
        intervalRef = setInterval(function() { doChange(); }, 1000);
    }

    function stopChange() {
        clearInterval(intervalRef);
    }

    function doChange() {
        var el = document.getElementById("woo");
        if (green) {
             el.className = "orange";
             green = false;
        } else {
             el.className = "green";
             green = true;
        }
    }
</script>

Answer 2

您只需删除对setInterval的通话即可。你的onclick处理程序没问题。请参阅此示例，其中我删除了setInterval调用：

http://jsfiddle.net/U6Z8F/

onClick不等待点击Javascript

2 个答案: