为什么我的 JS 中的计时器功能不会开始倒计时？

Question

我的倒数计时器不起作用。 理想情况下，我希望它在单击开始按钮时启动，我错过了什么吗？ 我已经完成了单击 startButton 变量时的事件侦听器，该变量具有指向 HTML 的document.getElementById("start-button") 。 我不确定为什么它不起作用。

 let countdownDisplay = document.getElementById("countdown-timer"); let startButton = document.getElementById("start-button"); let timer = 60; //document.getElementsByClassName("countdown"); let startGame = document.getElementsByClassName("button"); function countDown () { setInterval(function(){ if (timer <= 0) { clearInterval(timer = 0) } countdownDisplay.innerHTML = timer timer -= 1 }, 1000) } startButton.addEventListener('click', countDown)

 <div id="start-game"> <a class="button" id="start-button" href="quiz.html">Start Game - Kick Off</a> </div>

Answer 1

• 不要使用带有href属性的<a>标记，因为您的页面将重新加载到新的 url 路径。 相反，只需使用一个按钮：

• 正如@Scott Marcus所说，当文本不是 HTML 时不要使用.innerHTML ，因为.innerHTML具有安全性和性能影响。 改用.textContent 。

• 正如@Dave Newton所说， clearInterval的参数应该是setInterval返回的区间引用。 因此，将区间与变量相关联。

 let countdownDisplay = document.getElementById("countdown-timer"); let startButton = document.getElementById("start-button"); let timer = 60; //document.getElementsByClassName("countdown"); let startGame = document.getElementsByClassName("button"); function countDown () { let mytimer = setInterval(function(){ if (timer <= 0) { clearInterval(mytimer) } countdownDisplay.textContent = timer timer -= 1 }, 1000) } startButton.addEventListener('click', countDown)

 <div id="start-game"> <button type="button" class="button" id="start-button">Start Game - Kick Off</button> <br> <label id="countdown-timer">Start number</label> </div>

Answer 2

从锚点中删除href属性 - 它会导致您离开/重新加载页面。

 let countdownDisplay = document.getElementById("countdown-timer"); let startButton = document.getElementById("start-button"); let timer = 60; let startGame = document.getElementsByClassName("button"); let t; function countDown() { t = setInterval(function() { if (timer <= 0) { clearInterval(t) } countdownDisplay.innerHTML = timer timer -= 1 }, 1000) } startButton.addEventListener('click', countDown)

 <div id="start-game"> <a class="button" id="start-button">Start Game - Kick Off</a> </div>

Answer 3

对我来说似乎没问题。 我调整了 html 以删除链接，添加元素以显示倒计时并添加日志。 我删除了链接，因为如果您点击链接，您将离开页面。

您还应该了解代码片段如何处理堆栈溢出，您将获得更多答案。

 let countdownDisplay = document.getElementById("countdown-timer"); let startButton = document.getElementById("start-button"); let timer = 60; //document.getElementsByClassName("countdown"); let startGame = document.getElementsByClassName("button"); function countDown() { setInterval(function() { if (timer <= 0) { clearInterval(timer = 0); } //countdownDisplay.innerHTML = timer; timer -= 1; countdownDisplay.innerHTML = timer; console.log(timer); }, 1000) } startButton.addEventListener('click', countDown)

 <div id="start-game"> <a class="button" id="start-button">Start Game - Kick Off</a> </div> <div id="countdown-timer" />