請使用標準DOM操作

Question

那我基本上是試圖做的是產生的按鈕，它們具有相同的處理容器，但得到不同的參數，像這裏面調用相同的事件處理程序的按鈕：

<div id="container"> 
    <button onclick="onclick_handler(1)">1</button> 
    <button onclick="onclick_handler(2)">2</button> 
    <button onclick="onclick_handler(3)">3</button> 
</div> 

使用這樣的：

function onload_handler() { 
    var container = document.getElementById("container"); 
    var i; 
    for (i = 0; i < 3; i++) { 
     var button = document.createElement('button'); 
     button.innerHTML = i; 
     button.addEventListener('click', function() { 
      onclick_handler(i); 
     }); 
     container.appendChild(button); 
    } 
} 

function onclik_handler(val) { 
    console.log(val); 
} 

而當我點擊按鈕，我得到4在我的控制檯。我究竟做錯了什麼？

它也可以不使用匿名函數嗎？

Answer 1

嘗試，通過建立每個迭代的範圍，以解決由封閉造成的問題，

function(i){ 
    button.addEventListener('click', function() { 
    onclick_handler(i); 
    }); 
})(i); 

而且完整的代碼會是這樣，

function onload_handler() { 
    var container = document.getElementById("container"); 
    var i; 
    for (i = 0; i < 3; i++) { 
     var button = document.createElement('button'); 
     button.innerHTML = i; 
     (function(i){ 
      button.addEventListener('click', function() { 
      onclick_handler(i); 
      }); 
     })(i) 
     container.appendChild(button); 
    } 
} 

function onclik_handler(val) { 
    console.log(val); 
}