unoh.github.com

ループ内の無名関数

Thu May 18 03:52:53 -0700 2006

スーパーなエンジニアの近くに座っているMODです。
こないだJavascriptを書いててハマったネタをひとつ。

for文等繰り返し文の中で無名関数を定義するとき、定義内でインデックスの変数の値を用いることができないらしいです。
例えばこんなコード

<input type='button' id='wan1' value='わん'>
<input type='button' id='wan2' value='わんわん'>
<script type="text/javascript">
for (i=1; i<=2; i++) {
    elem = document.getElementById('wan'+i);
    elem.attachEvent('onclick', function(){alert('いぬ No.'+i);});
}
</script>
※このコードはIEのみ対応です。

ボタンをクリックすればそれぞれ「いぬ No.1」、「いぬ No.2」とアラートで表示させる意図ですが、実際にはどっちをクリックしても表示されるのは「いぬ No.3」という文字列。
どうやら i の値は関数を呼び出した時点で評価されているようです。
実行時に関数に渡されるイベントオブジェクトを用いてなんとかするしか今のところ解決策がみつかっていません。Javascript難しいです。