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函数返回false以防止默认行为：

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

现代代码倾向于使用JavaScript绑定事件处理程序。

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

问题是您使用的是提交类型的按钮。如果您需要避免提交表单，请返回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时设置计时器

上面链接的fork按预期工作。

如何从onClick调用函数

4 个答案: