JS初学者照搬教程点击事件代码无法正常运行求助

你的代码核心逻辑错误出在循环判断条件的冗余属性取值上：

• 第一行代码var numberOfDrumButtons= document.querySelectorAll(".drum").length;已经将选中的.drum类元素的数量赋值给了numberOfDrumButtons变量，该变量是数字类型，本身不存在length属性。
• for循环中的判断条件i < numberOfDrumButtons.length取数字的length属性会返回undefined，i < undefined的布尔值永远为false，循环不会执行，自然无法给按钮绑定点击事件，导致点击无响应。

修正后代码 #

var numberOfDrumButtons = document.querySelectorAll(".drum").length;

// 循环条件直接使用数字变量即可，无需额外取length
for (var i = 0; i < numberOfDrumButtons; i++) {
  document.querySelectorAll(".drum")[i].addEventListener("click", handleclick)
}

function handleclick(){
  alert( "i got clicked" )
}

开发建议 #

后续命名变量时可以更贴合变量存储的内容类型，比如存储元素数量的变量可以命名为drumButtonCount，看到变量名就能明确它是数字类型，避免后续误给数字类型取length属性的同类问题。

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