我不明白为什么我的舔舐不起作用

Question

我目前正在学习Javascript，在练习setInterval()和`clearInterval((时遇到了一个问题。

我正在写一个计时器，只要我按下一个按钮，它就会停止。我有一个变量来启动间隔，这个函数执行计时器代码，并将计时器所在的当前数字写入HTML中的div。

然后我有一个getElementById调用，它将onclick写入一个id为theButton的按钮中，该按钮包含一个clearInterval。

问题是，如果我只在代码的末尾写clearInterval，而不写onclick，它就可以工作了。但是，一旦我在onclick中编写它，它就无法工作，甚至不会显示错误。

我试着在互联网上搜索，得到的唯一答案是用var而不是let来表示带间隔的变量，但这不起作用。

var timerVariable = setInterval(theTimer, 1000);
let count = 11;
function theTimer() {
if (count != 0) {
count--;
document.querySelector("div").innerHTML += count;
console.log("its working");
}
}
document.getElementById("theButton").onclick = 'clearInterval(timerVariable)';

Answer 1

它不起作用的主要原因是，应该为onclick分配函数引用，而不是字符串。你的代码应该是这样的：

document.getElementById("theButton").onclick = function() {
clearInterval(timerVariable);
});

然而，更进一步，onclick不再被认为是良好的实践。一个更好的解决方案是使用addEventListener()附加事件，如下所示：

document.querySelector('#theButton').addEventListener('click', () => {
clearInterval(timerVariable);
});

这是应用了上述更正的完整工作版本。注意，我添加了一个else大小写，以在计数达到0时也清除间隔。如果没有这一点，间隔将毫无目的地无限运行。

var timerVariable = setInterval(theTimer, 1000);
let count = 11;
function theTimer() {
if (count != 0) {
count--;
document.querySelector("div").innerHTML += count;
console.log("its working");
} else {
clearInterval(timerVariable);
}
}
document.querySelector("#theButton").addEventListener('click', () => {
clearInterval(timerVariable);
});

<button type="button" id="theButton">Stop</button>
<div></div>