Javascript - 動的に作成された要素のクリック時にコンテンツに警告する

Question

3つのボタン要素が動的に作成されるコードがあり、作成時に各ボタンtextContentを警告したいが、最後の要素のみ警告され、他はありません。何故ですか？

var list = new Array("en", "to", "tre"); 

for (i=0; i<list.length; i++) { 
    button = document.createElement("button"); 
    button.textContent = list[i]; 
    document.body.appendChild(button) 
} 

button.addEventListener("click", function() { 
    alert(this.textContent); 
}); 

Answer 1

をiの各値に対して、buttonが異なります。ループの最後では、buttonはまだ最後の要素です。 、new Array(a, b, c)が非常に落胆している使用して、また

var list = new Array("en", "to", "tre"); 

for (i=0; i<list.length; i++) { 
    button = document.createElement("button"); 
    button.textContent = list[i]; 
    document.body.appendChild(button); 

    button.addEventListener("click", function() { 
     alert(this.textContent); 
    }); 

} 

[ a, b, c ]への切り替えを検討してください：あなたはそうのようなループ内でイベントリスナーを置く必要があります。あなたのコードを壊すことはありませんが、注目に値します。

Answer 2

最後のボタンだけにイベントリスナーを追加しています。

このような、ループ内を移動

：

var list = new Array("en", "to", "tre"); 
 

 
for (var i = 0; i < list.length; i++) { 
 
    button = document.createElement("button"); 
 
    button.textContent = list[i]; 
 
    document.body.appendChild(button) 
 
    button.addEventListener("click", function() { 
 
    alert(this.textContent); 
 
    }); 
 
}