이벤트 핸들러 내에서 변수를 상수로 사용

Question

이 예에서 "내가 버튼 5를 클릭 했나요?"라는 경고가 나타나는 이유는 무엇입니까? 이벤트 처리기에서 n을 올바른 값으로 유지하려면 어떻게해야합니까?

HTML :

<div id="container"></div> 

JS :

var container = document.getElementById("container"); 

for (var n = 0; n < 5; n++) { 

    var btn = document.createElement("button"); 
     btn.innerHTML = "Button " + n; 

    btn.onclick = function() { 
     alert("You clicked button " + n);   
    } 

    container.appendChild(btn); 

} 

난 그냥 this.innerHTML 같은 것을 사용하거나 값 N과 버튼에 속성을 할당 할 수 있습니다이 예에서 실현

하지만, 나는 그렇게하는 것에 관심이 없다.

을 heres 바이올린 : http://jsfiddle.net/WFNL2/1/

Answer 1

여기서 문제는 자바 스크립트 for 루프 만 기능 범위를 생성하지 않습니다.

당신은 즉시 호출 함수에서 루프 래핑 할 수

:

for (var n = 0; n < 5; n++) { 

    var btn = document.createElement("button"); 
     btn.innerHTML = "Button " + n; 

    btn.setAttribute('data-id', n); 

    btn.onclick = function() { 
     alert("You clicked button " + this.getAttribute('data-id'));   
    } 

    container.appendChild(btn); 
} 

:

for (var n = 0; n < 5; n++) { 
    (function(n){ 

     var btn = document.createElement("button"); 
      btn.innerHTML = "Button " + n; 

     btn.onclick = function() { 
      alert("You clicked button " + n);   
     } 

     container.appendChild(btn); 
    )(n); 
} 

또한 요소에 ID를 연결 수를