如何使用 for 循环将事件侦听器添加到动态生成的按钮答案

【问题标题】：How to add event listeners using a for loop to dynamically generated buttons如何使用 for 循环将事件侦听器添加到动态生成的按钮
【发布时间】：2023-03-16 04:18:01
【问题描述】：

我有一个带有动态生成按钮的页面，我正在尝试使用 for 循环向它们添加事件侦听器。我不确定为什么我的代码不起作用，因为它通过它的 ID 引用每个按钮并使用点表示法添加事件侦听器。代码中有一些注释有助于澄清。

这里是显示按钮的缩写标记仅

<button class="btnRollDice" id="btnRollDiceP1">Roll Dice!</button>
<button class="btnRollDice" id="btnRollDiceP2">Roll Dice!</button>
<button class="btnRollDice" id="btnRollDiceP3">Roll Dice!</button>

这里是js

rollDiceBtns = document.getElementsByClassName('btnRollDice');//returns a HTML collection

function addEventListeners(){
    console.log(rollDiceBtns);
    for(i=0;i<rollDiceBtns.length;i++){
        console.log(rollDiceBtns[i].id); //THIS WORKS, 
        rollDiceBtns[i].id.addEventListener('click', rollDice, false); //THIS DOES NOT
    }
}

如何使用 for 循环来完成？动态生成按钮？

【问题讨论】：

可能在最后一行删除.id.？您不会向字符串添加事件监听器。

标签： javascript addeventlistener

【解决方案1】：

addEventListener 是您在元素上找到的一种方法。

rollDiceBtns[i] 是一个元素。

rollDiceBtns[i].id 是一个字符串。

删除.id。

【讨论】：