자바 스크립트에서 for 루프/클릭 이벤트가있는 버튼을 여러 개 추가하는 방법은 무엇입니까?

Question

JavaScript를 사용하여 각기 다른 텍스트가있는 4 개의 버튼을 동적으로 추가하려고합니다. 기본적으로 사람이 초기 버튼을 클릭하면 또 다른 4 개의 버튼이 나타납니다.

각 단추에 표시되는 텍스트가 배열에서 나옵니다. 버튼을 클릭하면 배열의 마지막 문자열에있는 텍스트가있는 단추 하나만 만들어집니다.

내가 뭘 잘못하고 있니?

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에서 버튼을 제거하고 본문 끝 부분에 다시 삽입합니다.

에 한번이 아니라 : 당신은 단지 1 개 새로운 요소를 작성하는

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

. 이 시도.

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") 이동.