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 требуется функция, которая будет срабатывать при нажатии. Поскольку вы присвоили countDown(5,"para") в onclick, он вызывается немедленно.

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>

Обратите внимание , что с этим кодом будет странное поведение, если вы щелкнете несколько раз, когда таймер переинициализируется без сброса предыдущего, поэтому вам тоже нужно это обработать.