如何从 onClick 调用函数答案

【问题标题】：How to call a function from onClick如何从 onClick 调用函数
【发布时间】：2023-03-23 10:00:01
【问题描述】：

我正在尝试制作一个在您单击按钮时开始的倒计时。我似乎无法通过 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

【问题讨论】：

不起作用 - 有什么问题？
在演示中效果很好

标签： javascript

【解决方案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');
});

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

有几件事，在这里寻找变化：http://codepen.io/anon/pen/EPggNJ

总结：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：