以下のように記載した場合、各ボタンに同じ番号のアラートを出すように出来ない。
理由としては、onclick内で指定した無名関数内のhoge変数が無名関数スコープ外のhogeを参照しており、
その値が一定だから。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title></title>
<script>
function test() {
for(var i = 0; i < 5; i++) {
var hoge = i;
document.getElementById(i).onclick = function() {
alert(hoge);
}
}
}
</script>
</head>
<body>
<input type="button" value="各ボタンにイベントを設定します。" onclick="test();"><br><br>
<input type="button" id="0" value="ボタン0">
<input type="button" id="1" value="ボタン1">
<input type="button" id="2" value="ボタン2">
</body>
</html>
回避するには、参考URLに書いてあるように、onclickを即時実行関数に変える等が必要。
参考URLには、withを使った方法も紹介されているが、非推奨なので使わない方が無難かも。
最終更新：2020年09月05日 13:06
