开发者问题收集

无法向具有共同类名的多个元素添加事件侦听器。循环给出未定义错误 [重复]

2023-10-05
64
javascript html css

我的 html 文件中的代码块。 

<script>
    document.addEventListener('readystatechange', event => {
      if (event.target.readyState === "complete") {
        let temp = document.getElementsByClassName('js-hand-button');
        temp.array.forEach(element => {
          element.addEventListener("click", handButtonClick)
        });
      }
    });

    // temp = document.getElementsByClassName('js-hand-button');
    // temp[0].addEventListener("click", handButtonClick);
    // temp[1].addEventListener("click", handButtonClick);
    // temp[2].addEventListener("click", handButtonClick);
  </script>

我的 html 页面上有三个按钮。对于所有按钮，我想为“单击”添加相同的事件侦听器。

注释掉的 4 行工作正常。但是，我认为应该有一种更简单的方法来实现这一点，以防我稍后添加许多按钮。我尝试使用 array.forEach 并得到相同的错误。

实现这一点的唯一方法是向网页添加计时器吗？

控制台中的错误消息 -->未捕获的 TypeError：无法读取 HTMLDocument 中未定义的属性（读取“forEach”）。

使用 temp.forEach 而不是 temp.array.forEach 时出错 --> 未捕获的 TypeError：temp.forEach 不是 HTMLDocument 中的函数。

我尝试将此代码块移动到单独的 .js 文件中，但无法摆脱错误。此外，尝试预先将数组定义为空数组，但仍然出现相同的错误。

2个回答

我看到您提到您稍后也添加了按钮。最好的选择是使用事件委托。这意味着将点击处理程序添加到 document.body 等父元素并查找被点击的内容。这将允许您动态添加/更新和删除按钮，而不必担心创建新的事件侦听器等。 

function handButtonClick(el){
  console.log("b");
}

document.body.addEventListener("click",(e) => {
  const el = e.target; //get the target of the click
  if(el.classList.contains("js-hand-button")){ //check if the clicked element has the appropriate class
    handButtonClick(el); 
  }
});

<button class="js-hand-button">btn</button><button class="js-hand-button">btn</button><button class="js-hand-button">btn</button><button class="js-hand-button">btn</button><button class="js-hand-button">btn</button><button class="js-hand-button">btn</button><button class="js-hand-button">btn</button><button class="js-hand-button">btn</button><button class="js-hand-button">btn</button><button class="js-hand-button">btn</button><button class="js-hand-button">btn</button><button class="js-hand-button">btn</button><button class="js-hand-button">btn</button>
imvain2
2023-10-05

使用 for 循环使其工作： 

document.addEventListener('readystatechange', event => {
  if (event.target.readyState === "complete") {
    let temp = document.getElementsByClassName('js-hand-button');
    
    for (var i = 0; i < temp.length; i++) {
       temp.item(i).addEventListener("click", handButtonClick);
    }
  }
});
    
function handButtonClick() {
  console.log("click!")
}

<button class="js-hand-button">Button 1</button>
<button class="js-hand-button">Button 2</button>
<button class="js-hand-button">Button 3</button>
Helge Derenthal
2023-10-05