如何从onClick调用函数

How to call a function from onClick

本文关键字：调用 函数 onClick      更新时间：2023-09-26

我正在尝试制作一个倒计时计时器，当你点击按钮时就会启动。我似乎无法用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

这是正确的语法（至少如果你要使用内部事件属性），但你在提交按钮上使用了它，所以在函数运行后的一瞬间，表单提交并加载一个新页面（这会删除你用JS所做的更改）。

您可以从onclick函数返回false以防止默认行为：

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

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

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

问题是您使用的是提交类型的按钮。如果您需要避免提交表单，请返回false：

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

有几件事，请在此处查找更改：http://codepen.io/anon/pen/EPggNJ

摘要：

  • 您有一个局部变量secs，它总是从起始级别10开始递减，所以它总是9，并且永远不会小于这个值
  • 提交控件类型立即发送表单并重新加载页面
  • 即使在secs的值由于未返回而小于0时也设置计时器

上面链接的分叉按预期工作。

您可以通过点击按钮调用javascript函数，如下所示：使用这个

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