イベントに適切な値が伝わらない

質問

0から9までidをもつdivを用意して、それぞれクリックしたら
そのidを表示したいのですが、なぜかどれをクリックしても
表示されるのは「10」でした。以下のやり方では何がいけないのでしょうか？

function sample(){
for(i=0; i<10; i++){
var obj = document.getElementById(i);
obj.onclick = function(){ sample_alert(i); };
}
}
function sample_alert(i){
alert("i="+i);
}
window.onload = function()
{
sample();
}
for($i=0; $i<10; $i++){
print "<div id=\"{$i}\">{$i}</div><br>\n";
}

回答No.1

yambejp · ベストアンサー

今回のトラブルに直接関係はありませんがidに数字だけのものは
指定できません。

今回はiがオブジェクトでわたってるんじゃないですか？
こんな風にしてみてはどうでしょう？

<script>
function sample(){
for(i=0; i<10; i++){
var obj = document.getElementById('id'+i);
obj.onclick = sample_alert;
}
}
function sample_alert(){
alert("i="+this.id);
}
window.onload = function(){
sample();
}
</script>

<?PHP
for($i=0; $i<10; $i++){
print "<div id=\"id{$i}\">{$i}</div>\n";
}
?>

お礼

ご返答ありがとうございます。
そのやり方でできました。ありがとうございます。
単なる変数だと思ってたiがオブジェクトになってるわけですか・・・
自身もう少しオブジェクトについて理解していかないと駄目ですね・・・