- 締切済み
複数ボタンのクリックイベント
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)
＞・0～９のイベントは正しく登録されている。 ＞・しかし、全てがchecked(10)を呼んでいる 正確には「オンクリックイベントは」ですね。 また、ついでですが ＞これを回避する方法と、その対処理由を教えて頂きたく その前に「原因」をつかみましょう。エラーやバグの原因を把握せず場当たりの対処だけ覚えると、後々の泥沼が確定します。 今回の現象の理由は、関数が呼ばれるときのiの値はforを抜けたときの値である10であるということです。 さらにその理由など、詳細は「javascript イベントリスナー for」でググって出てくる http://tmlife.net/programming/javascript/javascript-for-eventlistener-bug-closer.html とか。
関連するQ&A
- CSSでのボタンのエフェクト
数字を小さい順にタップしていくコードなのですが この状態だと一度押されたものは背景が変わり押せなくなります ですがCSSでボタンのデザインを変えると押したかどうかわからなくなってしまいます コードは以下の通りです <body> <h1>小さい数字からタッチ!</h1> <p>Time: <span id ="time">0.0</span> sec. </p> <div id="board"> <input type="button" id="button_0" value="?" onclick="touched(0);"> <input type="button" id="button_1" value="?" onclick="touched(1);"> <input type="button" id="button_2" value="?" onclick="touched(2);"><br> <input type="button" id="button_3" value="?" onclick="touched(3);"> <input type="button" id="button_4" value="?" onclick="touched(4);"> <input type="button" id="button_5" value="?" onclick="touched(5);"><br> <input type="button" id="button_6" value="?" onclick="touched(6);"> <input type="button" id="button_7" value="?" onclick="touched(7);"> <input type="button" id="button_8" value="?" onclick="touched(8);"><br> </div> <p><input type="button" value="start!" onclick="timerStart();"></p> <script> var currentNum; var timet; var startTime; var isPlaying = false; function timerStart() { initBoard(); currentNum = 0; startTime = (new Date()).getTime(); if (!isPlaying) { isPlaying = true; runTimer(); } } function initBoard() { var nums = [0,1,2,3,4,5,6,7,8]; var num; var btn; for (var i=0; i<9; i++) { num = nums.splice(Math.floor(Math.random() * nums.length), 1); btn = document.getElementById('button_' + i); btn.value = num[0]; btn.disabled = false; } } function touched(n) { var btn = document.getElementById('button_' + n) if (btn.value == currentNum) { btn.disabled = true; currentNum++; } if (currentNum == 9){ clearTimeout(timer); isPlaying = false; alert('Your Score: ' + document.getElementById('time').innerHTML); } } function runTimer() { document.getElementById('time').innerHTML = (((new Date()).getTime() - startTime) / 1000).toFixed(1); timer = setTimeout(function() { runTimer() ; }, 100); } </script> </body> CSSは #board > input { height: 60px; width: 90px; margin-right : 5px; margin-top : 5px; background: -moz-linear-gradient(top,#09C 0%,#09C 50%,#069 50%,#069); background: -webkit-gradient(linear, left top, left bottom,from(#09C), color-stop(0.5,#09C), color-stop(0.5,#069), to(#069)); border: 1px solid #DDD; color: #FFF; padding: 10px 0; } ですどうすればデザインの変更を保ったまま押されたときに背景を変えることができますか？
- 締切済み
- JavaScript
- javascriptであるボタンを押すと他のボタンの表記が変わるというプログラムをつくりたいのですが。
モと表示された１個のボタンと穴と表示された２個のボタンを用意する。モのボタンをクリックするとそのボタンの法事は穴に変わり、残り２つの穴のどれかがモに変わる。穴のボタンをクリックされても何も変わらないプログラムをつくりたいのです。 最初の状態からモをクリックして他のボタンを変化させることはなんとかできたのですが、そのあと移動したモをおしても同じことをできるようにするのができなくて困ってます。 あと、できたらモを押して２つの穴のどちらかがモにかわるとき穴からモにかわるボタンは左側のもの、とかは決まってないでランダムだとうれしいです＞＜ おねがいします！！！ 全然違うかもしれませんが、つくってみたのものっけておきます <html> <head> <title></title> <script type="text/javascript"> var moFlg = true; function func(){ if (moFlg) { document.getElementById("btn01").innerHTML = "穴"; document.getElementById("btn02").innerHTML = "モ"; document.getElementById("btn03").innerHTML = "穴"; moFlg = !moFlg; } else { document.getElementById("btn01").innerHTML = "穴"; document.getElementById("btn02").innerHTML = "穴"; document.getElementById("btn03").innerHTML = "モ"; moFlg = !moFlg; } } </script> </head> <body> <button id="btn01" type="button" " onClick="func()"> モ </button> <button id="btn02" type="button" " onClick=""> 穴 </button> <button id="btn03" type="button" " onClick=""> 穴 </button> </body> </html> ここまでです。 でもできたら<input type ～ button ～ onClick>とかがつかわれているとうれしいです。
- ベストアンサー
- JavaScript
- 複数のボタンで音声とポップアップを同時に出す方法
大阪府地図形当てクイズを作成しています。ボタンをクリックすると音声が鳴るところまではうまく行きましたが、同じボタンで同時に「正解」などの表示を出す方法について教えてください。 コードを下に示しますが、<script>の最後に // アラート表示 alert('正解'); } を加えるとポップアップはすべてのボタンで「正解」になってしまいます。 <a onClick="soundbell(1)" >のところに何か付け加えるとどうかいろいろ試していますが、なかなかうまく行きません。 <script> function soundbell(n) { // 割り当てるID名（引数のnを連結して指定） var id = 'sound-'+n ; // 初回の再生以外だったら音声ファイルの再生ポイントを先頭にしておく if( typeof( document.getElementById( id ).currentTime ) != 'undefined' ) { document.getElementById( id ).currentTime = 0; } // [ID:sound-file]の音声ファイルを再生[play()]する document.getElementById( id ).play() ; } </script> </head> <BODY> <p align="center"> <a onClick="soundbell(1)"><input type="button" value=" 能勢町 "></a> <a onClick="soundbell(2)"><input type="button" value=" 高槻市 "></a> <a onClick="soundbell(2)"><input type="button" value=" 豊能町 "></a> <a onClick="soundbell(2)"><input type="button" value=" 島本町 "></a> //----- 略 ----- <a onClick="soundbell(2)"><input type="button" value=" 大阪市 "></a> </p> <audio id="sound-1" preload="auto"> <source src="correct-answer.mp3" type="audio/mp3"> </audio> <audio id="sound-2" preload="auto"> <source src="wrong-answer.mp3" type="audio/mp3"> </audio> </BODY> </HTML>
- ベストアンサー
- JavaScript
- javascriptのonclickに関数を追加？
現在、javascriptでinput要素に新しくonclick='hoge()'などの関数を追加したいのですができません。 色々調べたのですが、結局わからなかったので質問させていただきます。 何卒、ご教授宜しくお願いします。 ■やろうとしていること 下記ソースのボタンをどれかクリックしたら、 新しく、<input type="button" value="次へ" onclick="next()" />というのを<span>に 生成したいのですが、onclickが追加されずに困っております。 どのようにしたらよいのでしょうか？ちなみにtypeとvalueは生成されています。 <form name="test"> <input type="button" value="" id="answer_0" onclick="test(0)" /> <input type="button" value="" id="answer_1" onclick="test(1)" /> <input type="button" value="" id="answer_2" onclick="test(2)" /> </form> <span id="test2"></span> <script> function test(n) { ・・・ 中略 var nq = document.createElement('input'); nq.type = "button"; nq.value = '次へ'; nq.onclick = "nexｔ()"; document.getElementById('test2').appendChild(nq); } </script> 以上、宜しくお願い申し上げます。
- ベストアンサー
- JavaScript
- JavaScriptでIE上のボタンクリック
JavaScriptの初心者でIE上で表示されたボタンをクリックしたいのですが、2つのボタンのうち1つをクリックしたいです。 「document.all("Buttonok").click();」,「document.getElementById("Buttonok").click();」と記入してみたのですが、エラーとなります。 下記のようなボタンをJavaScriptで押すにはどうしたらいいのでしょうか？ どなたかすいませんがご教授ください。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ボタンのHTML ※formで囲まれてないです。 <table border="0" cellspacing="0" cellpadding="0" width="150"> <tr> <td width="50%"> <div id="Button"> <input type="buttonok" value="OK" class="Button" onclick="onClk("1");" /> </div> <div id="Button"> <input type="buttonng" value="NG" class="Button" onclick="onClk("0");" /> </div> </td> </tr> </table>
- ベストアンサー
- JavaScript
- <input type="file"/>
に文字列をセットするために <form> <input type="file" id="x"/> </form> <input type="button" onclick="f()" value="push"/> <script> function f() { var e=document.getElementById("x"); e.value="x.txt"; } </script> としてもセットできません <form> <input type="text" id="x"/> </form> <input type="button" onclick="f()" value="push"/> <script> function f() { var e=document.getElementById("x"); e.value="x.txt"; } </script> であればセットできるのです どうしたらセットできるでしょうか？
- ベストアンサー
- JavaScript
- onClickがinput type="image"だとできない！
以前、↓の質問をさせていただき解決したのですが、 input type="image" にしたいのですが、 ただ変更するだけでは、できません。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=2068911 どのように変更したらいいでしょうか？ 教えてください！ 現在下記の方法でやっています。 <style type="text/css"> .white{ background-Color:white; color:black; } .gray{ background-Color:gray; color:yellow; } .blue{ background-Color:blue; color:red; } </style> <body> <form> 全体： <input type="button" value="White" onClick="document.body.className='white'"> <input type="button" value="Gray" onClick="document.body.className='gray'"> <input type="button" value="Blue" onClick="document.body.className='blue'"><br> テーブル1: <input type="button" value="White" onClick="document.getElementById('t1').className='white'"> <input type="button" value="Gray" onClick="document.getElementById('t1').className='gray'"> <input type="button" value="Blue" onClick="document.getElementById('t1').className='blue'"><br> テーブル2: <input type="button" value="White" onClick="document.getElementById('t2').className='white'"> <input type="button" value="Gray" onClick="document.getElementById('t2').className='gray'"> <input type="button" value="Blue" onClick="document.getElementById('t2').className='blue'"><br> </form> <table width=100% id="t1"> <tr><td>test</td></tr> </table> <table width=100% id="t2"> <tr><td>test</td></tr> </table> </body>
- ベストアンサー
- JavaScript
- Javascriptを短くしたい
初歩的なことですみません。 Javascriptで表示／非表示を切り替えるものを作ろうと思うのですが、 以下のサンプル文のような形では、項目数が増えるとその分だけ どんどんJavascriptも長くなっていってしまいます。 Javascript文を簡潔にするには、どのように記述すればよいのでしょうか。 よろしくお願いします。 <script type="text/javascript"> <!-- function Hyo1(num) { if (num == 0) { document.getElementById("cont1").style.display="block"; } else { document.getElementById("cont1").style.display="none"; } } function Hyo2(num) { if (num == 0) { document.getElementById("cont2").style.display="block"; } else { document.getElementById("cont2").style.display="none"; } } // --> </script> <div id="cont1">ああああああ</div> <form> <input type="button" value="表示" onclick="Hyo1(0)"> <input type="button" value="非表示" onclick="Hyo1(1)"> </form> <form> <div id="cont2">いいいいいい</div> <input type="button" value="表示" onclick="Hyo2(0)"> <input type="button" value="非表示" onclick="Hyo2(1)"> </form>
- ベストアンサー
- JavaScript
- JqueryMobileでフォームボタンを非表示
JqueryMobileを使用している環境下でフォームボタンを非表示にする方法を探しています。 以下はID1の消去ボタンをクリックすると、ID2のボタンが消えることを期待しているものです。 しかし、ID2のボタンは消えませんでした。 どのような方法で、フォームボタンを非表示にできるのでしょうか。 なお、JqueryMobileを使用していない環境では、 問題なくID2のボタンが非表示になることを確認していますので、 JqueryMobile使用時のJavascriptの制限が何かしらありそうなのですが・・・。 <form name="myForm" action="#"> <input type="button" value="消去" name="button1" id ="1" onclick="a()"> <input type="button" value="消えるボタン" name="button2" id ="2" > </form> <script type="text/javascript"> <!-- function a(){ var n = document.getElementById("#2"); n.style.visibility = "hidden"; $('#2').button('refresh'); } // --> </script>
- ベストアンサー
- JavaScript
- javascript クイズ
こちらの http://okwave.jp/qa/q4105194.html 回答のNo.4の回答者様のソースコードなのですが <html> <head><style>.hid{display:none} .disp{display:block}</style></head> <body> <div id="s0">Start!!<input type="button" value="click" onClick="view();$('s0').className='hid';"></div> <div id="mn"></div> <div id="s1" class="hid"> Q1.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s2" class="hid"> Q2.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s3" class="hid"> Q3.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s4" class="hid"> Q4.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s5" class="hid"> Q5.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="hz" class="hid"> はずれでした！ <input type="button" value="次に進む" onClick="nextq()"> </div> <div id="sk" class="hid"> 正解です！ <input type="button" value="次に進む" onClick="nextq()"> </div> <script> var n=3; var q=5; var f=[]; var l=[]; var c=0; var cntc=0; window.onload=function(){ for(var i=0;i<n;i++){ do x=Math.floor(Math.random()*q)+1; while(f[x]) f[x]=true;l[i]=x; } } function view(){$('s'+l[c]).className='disp';$('mn').innerHTML=c+1+"問目";} function $(o){ return document.getElementById(o); } function hazure(){ $('hz').className='disp';} function seikai(){ $('sk').className='disp'; cntc++;} function nextq(){ $('sk').className='hid'; $('hz').className='hid'; $('s'+l[c]).className='hid'; if(++c>=n) owari(); else view(); } function owari(){ $('mn').innerHTML='正解数は、'+cntc; } </script> このままですと正解と不正解のボタンがそれぞれ一回ずつ押せてしまいます これを正解、不正解のどちらか一回しか押せないようにするにはどうすればよろしいでしょうか？ よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
頂いたリンクは、まっさきに読んで理解していました。 こういう心得は不要な回答ですが、お時間をとって頂いたことには感謝しております。 また、質問の仕方を再考するきっかけを頂けたことも併せて感謝いたします。