循环绑定addEventListener无响应，请求排查代码错误

嘿，我帮你找出代码里的问题啦！咱们一步步拆解来看：

核心错误点 #

• 你重复获取了同一个元素：先通过document.querySelector("#p1")拿到p1按钮，紧接着又用document.getElementById("p1")覆盖了同一个变量，其实这俩方法获取的是同一个按钮元素，完全没必要重复写
• 最关键的问题：getElementById() 和 querySelector("#id") 返回的都是单个DOM元素，不是元素数组！所以p1button.length的值是undefined，你的for循环根本不会执行，点击事件自然绑定不上

修正后的代码 #

如果你只是想给Player One按钮绑定点击事件，直接写就行：

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

要是想给两个按钮都绑定点击事件，那得先获取所有按钮的集合，再循环绑定：

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

补充说明 #

HTML里的id是唯一标识，一个页面里不能有重复id的元素，所以通过id获取元素的方法都只会返回单个元素，没法用数组下标去遍历。如果要操作多个元素，记得用querySelectorAll或者getElementsByTagName这类返回元素集合的方法哦~

内容的提问来源于stack exchange，提问作者Nadav Himmelfarb