Как вызвать функцию из onClick

Question

Я пытаюсь сделать таймер обратного отсчета, который начинается, когда вы нажимаете кнопку. Кажется, я не могу заставить функцию вызываться с помощью onclick. Каков правильный синтаксис для вызова функции со строковыми параметрами из onclick? Я пробовал:

onclick="countDown(10, 'status')" 

но это не работает. Кто-нибудь знает, что я делаю неправильно?

Демо:

function countDown(secs,elem) { 
 
    var element = document.getElementById(elem); 
 

 
    element.innerHTML = "Please wait for "+secs+" seconds"; 
 
    if(secs<1){ 
 
    clearTimeout(timer); 
 
    element.innerHTML = '<h2>Countdown Complete!</h2>'; 
 
    element.innerHTML += '<a href="#"> Click here now</a>'; 
 

 
    } 
 

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

<div id="status"></div> 
 

 
<form> 
 
    <input type="submit" name="go" onclick="countDown(5, 'status'); return false;"> 
 
</form>

http://codepen.io/michaelaharvey/pen/WrGxYp

Answer 1

Это правильный синтаксис (по крайней мере, если вы собираетесь использовать атрибуты встроенных событий), однако вы использовали его на кнопке отправки, так что через секунду после запуска функции форма отправляется и загружает новую страницу (которая вытирает вне изменений, внесенных вами в JS).

Вы можете вернуть ложь от функции OnClick, чтобы предотвратить поведение по умолчанию:

onclick="countDown(10, 'status'); return false;" 

Современного код склоняется к использованию JavaScript для привязки обработчиков событий.

document 
    .querySelector("input[type=submit]") 
    .addEventListener("click", function (event) { 
     event.preventDefault(); 
     countDown(10, 'status'); 
}); 

Answer 2

Вы можете позвонить яваскрипту функции из нажатия кнопки, как это: использования этого

<input type="submit" name="go" onclick="countDown(10, 'status'); return false"> 

Answer 3

Проблема в том, что вы используете кнопку отправки типа. Возвращение false, если вам нужно, чтобы избежать отправки формы:

<div id="status"></div> 

<form> 
<input type="submit" name="go" onclick="countDown(10, 'status'); return false;"> 
</form> 

Answer 4

Есть несколько вещей, обратите внимание на изменения здесь: http://codepen.io/anon/pen/EPggNJ

Резюме:

• у вас есть локальная переменная secs который всегда уменьшается с начального уровня 10, поэтому он всегда 9 и никогда не получает меньше этого
• Тип управления отправкой немедленно отправляет форму и перезагружает страницу
• установки таймера, даже когда значение secs меньше 0 из-за отсутствующей возвращения

выше связана вилка работает, как ожидалось.