動的にonclickを割当ながら、引数を正しく渡す方法を教えてください。

質問

皆様のお知恵を拝借させてください。

以下のように、HTML上の<div id="contents">の子になっている
<div>のa～cに、動的にonclickの動作を割り当てようとしています。
Javascriptの独自関数abcの引数として、"contents"を渡すことにより、
その子となっている<div>を取得し、
それぞれについて、
「A～Cをクリックすると、それに該当するdivのidを表示する」
という内容になっています。

私の期待としては、
　Aをクリックするとa
　Bをクリックするとb
　Cをクリックするとc
を表示させたいのですが、
どれをクリックしてもcが表示されてしまいます。　
----------------------------------------------
<div id="contents">
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
</div>

<script>
abc("contents");

function abc(contents){
var elm = document.getElementById(contents);
var cn = elm.childNodes;
for (var i = 0; i < cn.length; i++) {
var oElement = cn[i];
★ document.getElementById(oElement.id).onclick = function(){def(oElement.id);};
}
}

function def(id){
alert(id);
}
</script>
------------------------------------

要するに、
「動的にonclickの動作を割り当てることができる」
「引数がただしく渡せる」
の2つが満たしたいのですが、上記のような方法しかわからず、
行き詰ってしまっています。

また、説明を簡略化するためにあえてdef()の中身は、
alertのみにしていますが、実際にはもう少し複雑な処理をさせています。

回答No.1

osumitan · ベストアンサー

onclickに代入しているfunctionが以下のようになってますが、
　　function(){def(oElement.id);};
ここを以下のように変更すればＯＫかと思います。
　　function(){def(this.id);};
"oElement"を"this"に変えています。

oElementの内容はループしながら変わってしまっていて
onclickのfunctionが実行されるときには
ループの最後に入れているであろう<div id="c">でしょうから、
どれをクリックしても「c」と表示されるのでしょう。
"this"であれば、クリックされた<div>そのものを指しますから
そのidをalertで表示すればいい、ということでしょう。

お礼

osumitan様

ご回答ありがとうございます。
なるほど！こんなやり方があるんですね。
thisを使うというのは盲点でした。

お忙しいところありがとうございました！

回答No.2

noname#19688

#1の別回答です。

document.getElementById(oElement.id).onclick = new Function("def('"+oElement.id+"');");

お礼

happy_emi_2001様

ご回答ありがとうございます。
こちらでのうまく動作しました。
変数に入っている文字列を入れるように
整形してしまうやり方ですね。
こんなやり方があることも知りませんでした。

本当にありがとうございました。