Question

我是第一次尝试JS的初学者，遇到了一个问题。首先，教程向我提出了一个挑战，当我编写代码时，它有很多错误。然后我看到了解决方案，将代码编写为解决方案，令人惊讶的是教程的代码正在运行，但我的却没有。我编写了与解决方案相同的代码，但它似乎不起作用。请帮忙！！！！！！！！！这是JS代码

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

for (var i = 0; i < numberOfDrumButtons.length; i++) {
  document.querySelectorAll(".drum")[i].addEventListener("click", handleclick)
}



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

Answer 1

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

for (var i = 0; i < numberOfDrumButtons.length; i++) {
  document.querySelectorAll(".drum")[i].addEventListener("click", handleclick)
}

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

如果您查看第一行代码，您已经获得了输出的长度。只需删除第一行中的 .length，因为您在第二行中获得 numberOfDrumButtons 变量的长度

Answer 2

只需从顶部删除 .length，您的代码就可以正常工作，请检查以下示例：

或

您可以删除 numberOfDrumButtons.length 这些作品之一

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

for (var i = 0; i < numberOfDrumButtons.length; i++) {
  numberOfDrumButtons[i].addEventListener("click", handleclick)
}



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

<button class='drum'>button1</button>
<button class='drum'>button2</button>
<button class='drum'>button3</button>
<button class='drum'>button4</button>
<button class='drum'>button5</button>
<button class='drum'>button6</button>
<button class='drum'>button7</button>

我正在尝试遵循教程并且教程代码有效，但我的代码不起作用

2 个答案: