Question

我想要做的是，只要有人点击我的按钮，就可以调用我的功能。但是，我知道可以用

完成

<button onclick="myFuntion()>

但我想跳过那一步，我不想在我的按钮中使用一个功能，我听说它的编程很糟糕。

然而，这是我文件的样子。

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<script type="text/javacript" src="javascript.js"> </script>
<title> Javascript </title>

<script>

function testFunction(){
document.getElementById("test").onclick = Hello;
}
function Hello(){
    alert("Hello");
}
</script>
</head>

<body>
<button type="button" id="test" <!-- I know i can use onclick="testFunction()" here but i dont wanna !-->> Click me </button>

</body>

</html>

那怎么会弹出盒子＆＃34;你好＆＃34;每当我按下按钮，我做错了什么？

Answer 1

您必须在加载HTML正文后调用testFunction，以便实际创建绑定。

也就是说，在文件的末尾，您可以执行以下操作：

...
<script>
   testFunction()
</script>
</body>
...

如果您在head脚本中运行该绑定代码，button元素将不存在 - 这就是为什么必须在最后。

jQuery之类的JavaScript库通过提供ready钩子使其更加优雅，其中一个将页面完全加载后调用代码，而不必求助于页面底部的代码。 / p>

在{em>结束时使用script的完整示例（令人困惑的是，Stack Snippets不会按照它们实际位于代码段中的顺序显示给您;即使它看起来不像它，脚本也是如此在这里结束了）：

// Scoping function to avoid creating unnecessary globals
(function() {
  // The click handler
  function Hello() {
    alert("Hello");
  }

  // Hooking it up -- you *can* do it like you did:
  //document.getElementById("test").onclick = Hello;
  // ...but the modern way is to use addEventListener,
  // which allows for more than one handler:
  document.getElementById("test").addEventListener(
    "click", Hello, false
  );
})();

<button type="button" id="test">Click me</button>

Answer 2

window.onload=testFunction;
function testFunction(){
document.getElementById("test").onclick = Hello;
}
function Hello(){
    alert("Hello");
}

Answer 3

始终在testFunction中运行该行。如下所示： https://jsfiddle.net/arugco4b/

从按钮调用警报功能但不使用onclick

3 个答案: