자바 스크립트 버튼 또는 addEventListener

Question

window.onload = function() { 
 
    for(i = 1; i < 21; i++) { 
 
     var button = document.createElement("button"); 
 
     var text = document.createTextNode(i); 
 
     button.appendChild(text); 
 
     button.addEventListener("click", function() { 
 
      alert(text.nodeValue); 
 
     }); 
 
     var body = document.getElementsByTagName("body")[0]; 
 
     body.appendChild(button); 
 
    }  
 
}

나는 인덱스 1, 2, 3,로, 일렬로 배열 페이지로 (20 개) 버튼을 추가 할

..., (20)이 버튼을 클릭하면 경고한다 그 색인. 예를 들어, 첫 번째 버튼 (가장 왼쪽)을 클릭하면 1을 경고해야합니다. 순수한 javaScript로이를 수행하고 html을 작성하지 않고 javaScript 만 수행하려고합니다. 내가 작성한 코드의 경우, 버튼 안의 텍스트가 정확하더라도 20 개의 버튼 모두에 대해 20 개의 경고를 표시합니다. This is what it alerted when I clicked button with index 1 내 질문에 올바른 색인 대신 20 개의 버튼 모두에 20 개의 경고를 표시하는 이유는 무엇입니까? 올바른 색인을 표시하려면 어떻게해야합니까?

업데이트 :

window.onload = function() { 
 
    for(i = 1; i < 21; i++) { 
 
     var button = document.createElement("button"); 
 
     var text = document.createTextNode(i); 
 
     button.appendChild(text); 
 
     button.addEventListener("click", function() { 
 
      alert(button.innerText); 
 
     }); 
 
     var body = document.getElementsByTagName("body")[0]; 
 
     body.appendChild(button); 
 
    }  
 
}

이 중 하나가 작동하지 않습니다, 동일한 문제.

Answer 1

for 루프가 완전히 끝난 후 이벤트 리스너가 실제로 LATER (실제로 클릭이 발생할 때) 발생한다는 문제가 있습니다. 따라서 text 변수는 사용자가 마지막으로 작성한 버튼의 마지막 값으로 설정됩니다. 따라서 마지막 텍스트 값만 표시됩니다.

text 변수 대신 클릭 한 실제 항목을 참조하여 수정할 수 있습니다.

window.onload = function() { 
 
     for(var i = 1; i < 21; i++) { 
 
      var button = document.createElement("button"); 
 
      var text = document.createTextNode(i); 
 
      button.appendChild(text); 
 
      button.addEventListener("click", function() { 
 
       // get the clicked on button with this 
 
       alert(this.firstChild.nodeValue); 
 
      }); 
 
      document.body.appendChild(button); 
 
     }  
 
    }

또는 루프가 반복 될 때마다 그 자체가 지속되는 변수를 제공하는 폐쇄 만들어 : 향후 참조를 위해, 참고로

window.onload = function() { 
 
     for(var i = 1; i < 21; i++) { 
 
      // create a separate closure for each iteration of the for loop 
 
      (function() { 
 
      var button = document.createElement("button"); 
 
      var text = document.createTextNode(i); 
 
      button.appendChild(text); 
 
      button.addEventListener("click", function() { 
 
       alert(text.nodeValue); 
 
      }); 
 
      document.body.appendChild(button); 
 
      })(); 
 
     }  
 
    }

을,와 함께 body 요소를 얻을 수 있습니다.. 당신이하는 것처럼 그것을 발견 할 필요가 없습니다.