將函數鏈接到單擊按鈕的Javascript

Question

我只需點擊一下按鈕即可調用計時器。 計時器功能：

function countDown(seconds, elem){
    var element = document.getElementById(elem);
    element.innerHTML = "Please wait for "+seconds+ " seconds";

    if(seconds < 1){
        clearTimeout(timer);
        element.innerHTML ='<h2> You can let Go, Frist Responders have been informed</h2>';
    }
    seconds--;

    var timer = setTimeout('countDown('+seconds+',"'+elem+'")',1000); 
}

功能調用：

document.querySelector('body').onClick = countDown(5,"para");

HTML：

<div class="wrapper" id="butt2">
<button id="butt" class="fade-in-fwd" >SOS</button>
</div>

<p id="para"></p>

一旦網頁加載，這就開始運行計時器。 我該如何限制這個

Answer 1

您的代碼中存在以下幾個問題：

1. onClick應該寫成onclick
2. onclick需要一個在點擊時觸發的功能。 由於您已在onclick指定了countDown(5,"para") ，因此會立即調用它。

 document.querySelector('body').onclick = function(){ countDown(5,"para"); } function countDown(seconds, elem) { var element = document.getElementById(elem); element.innerHTML = "Please wait for " + seconds + " seconds"; if (seconds < 1) { clearTimeout(timer); element.innerHTML = '<h2> You can let Go, Frist Responders have been informed</h2>'; } seconds--; var timer = setTimeout('countDown(' + seconds + ',"' + elem + '")', 1000); } 

 <div class="wrapper" id="butt2"> <button id="butt" class="fade-in-fwd">SOS</button> </div> <p id="para"></p> 

請注意 ，如果在重新初始化計時器時多次單擊此代碼將會出現奇怪的行為而不清除前一個，因此您也需要處理它。