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

Question

I have a page w/ dynamically generated buttons and i'm trying to add event listeneners to them using a for loop. I'm not sure why my code is not working as it refers the each button via it's ID and uses dot notation to add the event listener. There is some commenting in the code to help clarify.

Here is abbreviated markup showing the buttons only

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

Here is the 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
    }
}

How would this be done using a for loop? to dynamically generated buttons?

Answer 1

addEventListener is a method you find on elements.

rollDiceBtns[i] is an element.

rollDiceBtns[i].id is a string.

Remove .id .