的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點擊不工作

回答

相關問題