JavaScriptでforループ/クリックイベントを含む複数のボタンを追加するにはどうすればよいですか？

Question

JavaScriptを使用して、それぞれに異なるテキストの4つのボタンを動的に追加しようとしています。人が最初のボタンをクリックすると、基本的に別の4つのボタンがポップアップします。

各ボタンに表示されるテキストは配列から来ていますが、ボタンをクリックすると、配列内の最終文字列のテキストが1つだけ作成されるという問題があります。

私は間違っていますか？

ここで私が使用していたコードです：

var btn = document.getElementById("btn"); 
var option = document.createElement("button"); 
var optionText = ["Button 1", "Button 2", "Button 3", "Button 4"]; 

btn.addEventListener("click", function(){ 
    buttonSelect(); 
}) 

function buttonSelect() { 
    for(var i = 0; i < optionText.length; i++){ 
    document.body.appendChild(option); 
    option.innerHTML = optionText[i]; 
    } 
} 

Answer 1

をあなたが唯一のボタンを作成し、何度も繰り返し、それを追加しているが。 appendChildは、作成したボタンをコピーせず、どこからでも取得し、指定した場所に再接続します。したがって、document.body.appendChild(option)を使用すると、ボタンがDOMから削除され、本文の最後に挿入されます。

は、代わりにこれを試してみてください：

function buttonSelect() { 
    for(var i = 0; i < optionText.length; i++){ 
    var option = document.createElement("button"); 
    document.body.appendChild(option); 
    option.innerHTML = optionText[i]; 
    } 
} 

Answer 2

をあなたは1つのだけ新しい要素を作成しています。これを試して。

var btn = document.getElementById("btn"); 
var optionText = ["Button 1", "Button 2", "Button 3", "Button 4"]; 

btn.addEventListener("click", function(){ 
    buttonSelect(); 
}) 

function buttonSelect() { 
    for(var i = 0; i < optionText.length; i++){ 
    var option = document.createElement("button"); 
    option.innerHTML = optionText[i]; 
    document.body.appendChild(option); 
    } 
} 

は、基本的にはあなたのforループ内document.createElement("button")を移動すると、あなたの配列内の各アイテムの新しい要素を作成します。