forループを使用して動的に生成されたボタンにイベントリスナーを追加する方法

Question

動的に生成されたボタンを持つページがあり、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 
    } 
} 

ある ボタンを示すマークアップを省略していますか？動的に生成されたボタンに？

Answer 1

addEventListenerは、要素で見つける方法です。

rollDiceBtns[i]は要素です。

rollDiceBtns[i].idは文字列です。

.idを削除します。