は、私は基本的に行うには何をしようとしている標準の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 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); 
}