的addEventListener点击不工作

我创建一个秒表是这样的：的addEventListener点击不工作

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Stopwatch</title> 
     <link href="https://fonts.googleapis.com/css?family=Saira" rel="stylesheet"> 
     <link href="stopwatch.css" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet"> 
    </head> 
    <body> 
     <div class="but"> 
     <h1>Stopwatch</h1> 
      <p id="timer">0</p> 
      <button id="start">Start/Stop</button> 
      <button id="reset">Reset</button> 
      <button id="record">Record Time</button> 
     </div> 
    </body> 
</html>

和JavaScript：

var timer = document.getElementById("timer"); 
var sec = 0; 
document.getElementById("start").addEventListener("click", counter()); 

function counter(){ 
    setInterval(time(), 10); 
} 

function time(){ 
    sec++; 
    timer.innerHTML = sec; 
}

然而，当我点击启动按钮，它不工作。有人可以解释为什么吗？

来源

2017-08-17 NewbieCoder

就行了：

document.getElementById("start").addEventListener("click", counter());

这是错误的，它应该是：

document.getElementById("start").addEventListener("click", counter);

当您使用() ，它正在调用func灰。在这里，你将函数传递给addEventListener，而不是调用它。

一样就行了：

setInterval(time(), 10);

它应该是：

setInterval(time, 10);

所以，你的代码应该是：

var timer = document.getElementById("timer"); 
 
var sec = 0; 
 
document.getElementById("start").addEventListener("click", counter); 
 

 
function counter(){ 
 
    setInterval(time, 10); 
 
} 
 

 
function time(){ 
 
    sec++; 
 
    timer.innerHTML = sec; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title>Stopwatch</title> 
 
     <link href="https://fonts.googleapis.com/css?family=Saira" rel="stylesheet"> 
 
     <link href="stopwatch.css" rel="stylesheet"> 
 
     <link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 
     <div class="but"> 
 
     <h1>Stopwatch</h1> 
 
      <p id="timer">0</p> 
 
      <button id="start">Start/Stop</button> 
 
      <button id="reset">Reset</button> 
 
      <button id="record">Record Time</button> 
 
     </div> 
 
    </body> 
 
</html>

来源

2017-08-17 02:16:02

非常感谢！ – NewbieCoder

您是要通功能和不立即叫他们：

变化document.getElementById("start").addEventListener("click", counter());到document.getElementById("start").addEventListener("click", counter);

变化setInterval(time(), 10);到setInterval(time, 10);

观看演示如下：

var timer = document.getElementById("timer"); var sec = 0; document.getElementById("start").addEventListener("click", counter); function counter(){ setInterval(time, 10); } function time(){ sec++; timer.innerHTML = sec; }

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Stopwatch</title> <link href="https://fonts.googleapis.com/css?family=Saira" rel="stylesheet"> <link href="stopwatch.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet"> </head> <body> <div class="but"> <h1>Stopwatch</h1> <p id="timer">0</p> <button id="start">Start/Stop</button> <button id="reset">Reset</button> <button id="record">Record Time</button> </div> </body> </html>

来源

2017-08-17 02:14:54 kukkuz

的addEventListener点击不工作

回答

相关问题