締切済み

複数ボタンのクリックイベント

2013/10/29 17:05

JavaScriptのイベントなのか変数のスコープなのかで質問がございます。（一番下に全ソースを貼りました。見づらくて申し訳ありません。） htmlに複数の似た名前のボタンがあります。名前：button_n (n = 0 to 9) 押されたボタンに応じた処理を登録しようと思い、下記を 9個書いたところ望んだ動きをしました。 document.getElementById('button_'+0).onclick = function() { clicked(0); } document.getElementById('button_'+1).onclick = function() { clicked(1); } ...... document.getElementById('button_'+9).onclick = function() { clicked(9); } これでは芸がないので、添字の部分を変数にし、下記のようにしたところ for (i=0; i<10; i++) { 　　 document.getElementById('button_'+i).onclick = function() { clicked(i); } } どのボタンを押しても動きません。私の認識、以下です。　・0～９のイベントは正しく登録されている。　・しかし、全てがchecked(10)を呼んでいる質問１　これを回避する方法と、その対処理由を教えて頂きたくお願い致します。　質問２（オプション）　参考になる資料を教えていただければ幸いです。　例）サイ本のどこを読めばいいよ。とか、このURLがわかりやすいよ。等よろしくお願い致します。 ■ソース <!DOCTYPE html><html lang="ja"> <head><meta charset="utf-8"></head> <body> <h2>所望の動きをする</h2> <input type="button" id="button_0" value="0"> <input type="button" id="button_1" value="1"> <h2>所望の動きをしてくれない</h2> <p></p> <input type="button" id="button_2" value="2"> <input type="button" id="button_3" value="3"> <script> (function() { document.getElementById('button_'+0).onclick = function() { clicked(0); } document.getElementById('button_'+1).onclick = function() { clicked(1); } /* 配列の最後の添字が使われる気がする。　*/ for (i=2; i<4; i++) { 　　 document.getElementById('button_'+i).onclick = function() { clicked(i); } } function clicked(n) { var btn = document.getElementById('button_' + n); console.log(btn.value); alert(btn.value); } })(); </script> </body><html>

s19740802
お礼率91% (51/56)

JavaScript
回答数1
ありがとう数7

みんなの回答 （1）
専門家の回答

みんなの回答

play_with_you
ベストアンサー率37% (112/301)

2013/10/29 17:19 回答No.1

＞・0～９のイベントは正しく登録されている。＞・しかし、全てがchecked(10)を呼んでいる正確には「オンクリックイベントは」ですね。また、ついでですが＞これを回避する方法と、その対処理由を教えて頂きたくその前に「原因」をつかみましょう。エラーやバグの原因を把握せず場当たりの対処だけ覚えると、後々の泥沼が確定します。今回の現象の理由は、関数が呼ばれるときのiの値はforを抜けたときの値である10であるということです。さらにその理由など、詳細は「javascript イベントリスナー for」でググって出てくる http://tmlife.net/programming/javascript/javascript-for-eventlistener-bug-closer.html とか。

質問者