Question

请不要复制，我只想了解如果我写错了代码，我以为我多次检查过。

我无法理解我的代码不起作用的方式。

JS：

var p1button = document.querySelector("#p1");
var p2button = document.getElementById("p1");

//p1 btn
for(var i = 0; i < p1button.length; i++){
    p1button[i].addEventListener("click", function(){
alert("clicked") });
 };

HTML：

<button id="p1">Player One</button>
         <button id="p2">Player Two</button>

我的codepen

Answer 1

它不起作用，因为p1button已经是ElementButton，而不是必须使用[0]来获取元素的数组。

var p1button = document.querySelector("#p1");

p1button.addEventListener("click", function(){
  alert("clicked")
});

<button id="p1">Player One</button>

然而，您是否有多个类 .btn元素，您的代码才有意义，因为.getElementsByClassName或.querySelectorAll确实会返回 类似数组 NodeList ：

function doThaChng () {
  alert("clicked!");
}

var btn = document.querySelectorAll(".btn");

for(var i=0; i<btn.length; i++) {
 btn[i].addEventListener("click", doThaChng);
}

<button class="btn">Player One</button>
<button class="btn">Player Two</button>

或者在ES6中

const btn = document.querySelectorAll(".btn");
const doThaChng = () => alert("Clicked");

[...btn].forEach(el => el.addEventListener("click", doThaChng) );

<button class="btn">Player One</button>
<button class="btn">Player Two</button>

Answer 2

p1button不是数组，而是DOM元素。

尝试保持：

p1button.addEventListener("click", function(){
   alert("clicked") 
});

Answer 3

来自documentation of querySelector()：

Document方法querySelector（）返回文档中与指定选择器或选择器组匹配的第一个元素。如果未找到匹配项，则返回null。

试一试（打开开发人员工具查看控制台）：

console.log(document.querySelector("button"));

所以你不需要（并且你不能）迭代p1button，因为它是一个节点而不是一个数组。

Answer 4

这是因为querySelector和getElementById返回单个DOM元素而不是DOM元素数组。因此，你的for循环是无用的，并尝试在undefined值上添加一个事件监听器。

这是一种侦听点击事件的正确方法

var p1button = document.querySelector("#p1");    
p1button.addEventListener("click", function(){
  alert("clicked") 
});

您可以在此处找到有关querySelector和getElementById的更多信息。

addEventListener for循环不响应

4 个答案: