Question

我正在学习JavaScript而我正在尝试向我的按钮添加一个事件监听器。这是我的HTML（是的，脚本在按钮后加载）：

<html>
   <body>
      <button>Click me</button>
   <body>

   <script src="experimenting2.js"></script>
</html>

这是我的JS代码：

alert("Connected");
var body = document.getElementByTagName("body");
var button = document.getElementByTagName("button");

button.addEventListener("click", function() {
   alert("Clicked");

   body.style.background = "pink";

});

当我加载页面时，JS文件开头的第一个警报被触发，但是addEventListener中的第二个警报没有被触发。

Answer 1

没有像document.getElementByTagName("body");这样的document.getElementsByTagName("body");它会返回你的集合，你需要遍历这个集合以将事件附加到其中的每个节点

或者您可以使用document.querySelector('body')选择正文，document.querySelector('button')选择按钮

请在此处阅读document.querySelector

alert("Connected");
var body = document.querySelector("body");
var button = document.querySelector("button");

button.addEventListener("click", function() {
   alert("Clicked");

   body.style.background = "pink";

});

<html>
   <body>
      <button>Click me</button>
   <body>

   
</html>

Answer 2

按标签名称获取元素的方法签名是

getElementsByTagName(..)

但你正在使用

getElementByTagName(..)

以下代码中的任何方式

var button = document.getElementsByTagName("button");

您将获得一组按钮，而不是一个按钮。你想在哪里添加EventListener？更好的方法是通过为HTML

中的按钮分配id来通过Id访问元素

var button = document.getElementById("someid");

否则，您也可以尝试，因为您只有一个按钮，您打算将EventListener添加到

var button = document.querySelector("button");

Answer 3

getElementByTagName应为getElementsByTagName

您可以使用querySelector代替getElementsByTagName，如下所示：

var button = document.querySelector("button");

而且你不必为身体分配一个变量。只需像document.body这样引用它：

document.body.style.background = "pink";

所以你的完整代码应如下所示：

＆＃13;

alert("Connected");
var button = document.querySelector("button");

button.addEventListener("click", function() {
   alert("Clicked");

   document.body.style.background = "pink";

});

＆＃13;

<button>Click me</button>

＆＃13;

jsFiddle： https://jsfiddle.net/AndrewL64/2cscc5ka/

Answer 4

实际上，问题是您正在调用getElementByTagName并且它是getElementsByTagName。它也会返回一个项目数组。

检查工作样本：

＆＃13;

console.log("Connected");
var body = document.getElementsByTagName("body")[0];
var button = document.getElementsByTagName("button")[0];

button.addEventListener("click", function() {
  console.log("Clicked");
  body.style.background = "pink";

});

＆＃13;

<html>

<body>
  <button>Click me</button>

  <body>

    <script src="experimenting2.js"></script>

</html>

＆＃13;

同时检查使用id属性和函数getElementById

是否更容易

＆＃13;

console.log("Connected");
var body = document.getElementById("body");
var button = document.getElementById("button");

button.addEventListener("click", function() {
  console.log("Clicked");
  body.style.background = "pink";

});

＆＃13;

<html>

<body id="body">
  <button id="button">Click me</button>

  <body>

    <script src="experimenting2.js"></script>

</html>

＆＃13;

JavaScript addEventListener由于某种原因不起作用

4 个答案: