JavaScriptの動かないコード（中級編） forループ内でイベントリスナを定義したら，動作がおかしい。（クロージャや関数オブジェクトの性質を理解していないために発生するエラー）

連載目次へ

以下のJavaScriptコードが，意図した動作をしないのは，なぜですか。（制限時間１分）

やりたい事：
・ボタンごとに，0, 1, 2 という異なる数を表示したい。

<h3>ボタンごとに異なる数字をアラート表示するサンプル</h3>

<input type="button" id="id0" value="0">
<input type="button" id="id1" value="1">
<input type="button" id="id2" value="2">


<script>

for (var i = 0; i < 3; i ++ ){

  // クリック時のイベントを定義
  document.getElementById( 'id' + i ).onclick = function(){

    // それぞれ異なった数値を表示する。
    alert( i );

  };

}

</script>

解答は下記の通り。