如何从onClick调用函数

Question

I'm trying to make a countdown timer that starts when you click the button. I can't seem to get the function to be called with the onclick. What is the proper syntax for calling a function with string parameters from onclick? I tried:

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

but that doesn't work. Anyone know what I'm doing wrong?

Demo:

 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

That is the correct syntax (at least if you are going to use intrinsic event attributes), however you have used it on a submit button so a split second after the function runs, the form submits and it loads a new page (which wipes out the changes you made with JS).

You can return false from the onclick function to prevent the default behaviour:

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

Modern code would lean towards using JavaScript to bind event handlers.

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

Answer 2

您可以通过单击按钮来调用javascript函数，如下所示：

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

Answer 3

The problem is that you're using a submit type of button. Return false if you need to avoid submitting the form:

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

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

Answer 4

There are a couple of things, look for the changes here: http://codepen.io/anon/pen/EPggNJ

Summary:

• you have a local variable secs which is always decremented from the starting level 10, so it's always 9 and never gets less than that
• The submit control type immediately sends the form and reloads the page
• setting a timer even when the value of secs is less than 0 due to missing return

The above linked fork works as expected.