Question

我正在尝试创建一个带有转到下一页并还调用main.js中的函数的按钮的网站，现在暂时忽略下一页导航。

我的HTML按钮代码如下：

<button onclick="resetAll()" id="beginButton" class="float-left submit-button"><h3>Begin</h3></button>

我的JS代码如下：

window.onload = function() {
  function resetAll() {
    // some resets and a log to show me it's been reset
    console.log("All reset");
  }
}

我希望代码在我的js文件中运行，直到找到函数'resetAll（）'，但我收到错误Uncaught ReferenceError: resetAll is not defined at HTMLButtonElement.onclick。我想将此按钮链接到js文件，这样我的HTML不会被那里的js代码弄乱。

我也尝试使用代码

document.getElementById('beginButton').onclick = resetAll();

，但这似乎在页面加载时运行。据我所知window.onload应该确保在加载整个HTML页面之前定义了该函数。我的HTML脚本标签位于我的HTML代码的开头，因此位于按钮声明的上方。

有人可以帮我这个忙吗？因为我一直被这些问题困扰。

Answer 1

从window.onload（具有自己的作用域）中删除它-并同时删除()：document.getElementById('beginButton').onclick = resetAll;

或在其中移动onclick：

window.onload = function() {
  document.getElementById('beginButton').onclick = function() {
    // some resets and a log to show me it's been reset
    console.log("All reset");
  }
}

推荐

window.addEventListener("load", function() {
  document.getElementById('beginButton').addEventListener("click", function(e) {
    e.preventDefault(); // remove if you want the button to submit
  // some resets and a log to show me it's been reset
    console.log("All reset");
  }
}

Answer 2

您将resetAll函数定义为本地函数，无法从onload函数中访问它。

您应该这样定义

window.onload = function() {
  window.resetAll = function () {
    // some resets and a log to show me it's been reset
    console.log("All reset");
  }
}

您将resetAll的执行结果称为onclick。

您应该

document.getElementById('beginButton').onclick = resetAll

Answer 3

我不建议像其他人建议的那样使用element.onclick语法。我也不建议内联事件。

相反，我建议使用addEventListener()方法。

document.querySelector("#beginButton").addEventListener("click", e => {
   // resets and other code you want to happen when clicked 
   console.log("clicked!"); // just for the example
});

<button id="beginButton" class="float-left submit-button"><h3>Begin</h3></button>

您的代码无法正常工作的原因是，直到页面加载后才创建该函数，因此未定义内联函数。

如果您将JavaScript放在<body>标签的末尾，则无需等待窗口加载。

Javascript：即使我使用window.onload，我也会收到错误“未定义var”

3 个答案: