複数のボタンで音声とポップアップを同時に出す方法
- 大阪府地図形当てクイズを作成しています。ボタンをクリックすると音声が鳴るところまではうまく行きましたが、同じボタンで同時に「正解」などの表示を出す方法について教えてください。
- コードを下に示しますが、<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>
- ベストアンサー
複数のボタンで音声とポップアップを同時に出す方法
大阪府地図形当てクイズを作成しています。ボタンをクリックすると音声が鳴るところまではうまく行きましたが、同じボタンで同時に「正解」などの表示を出す方法について教えてください。 コードを下に示しますが、<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>
- YNishikawa
- お礼率50% (1/2)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関数soundbellの引数nが1の時正解、それ以外(n=2)の時不正解ということであれば、関数soundbellの末尾でnによる条件分岐を行ってアラートを表示すればよいでしょう。 具体的には、下記のコードを追加します。 // 正解か不正解をアラートで表示 if( n == 1 ){ alert('正解'); }else{ alert('不正解'); }
関連するQ&A
- 音声とポップアップ表示を一つのボタンで行う方法
ネット情報のコピペでhead部分に <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> を書いて body部分に <a onClick="soundbell(1)"><input type="button" value="aaaaaa"></a> <a onClick="soundbell(2)"><input type="button" value="＊＊＊＊"></a> <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> を記述してうまく音が出ています。 ここで、同じボタンをクリックすると同時に、音とポップアップ表示することに挑戦していますが、なかなかうまくいきません。 どなたか教えてくれませんかね。
- ベストアンサー
- JavaScript
- jsと<audio>タグについて
HTML5の<audio>タグを使用し、試聴プレーヤーのようなものを作りたいと思っています。 こちらのサイト（http://www.html5-memo.com/audio/player001/）様から拝借したソースが以下です。 javascript------------------ function audioPlay(){ document.getElementById("aka").play(); } function audioPause(){ document.getElementById("aka").pause(); } html----------------------- <audio id="aka" preload="auto"> <!-- 1曲目 --> <source src="audio/aka.mp3" type="audio/mp3"></audio> <input type="button" onclick="audioPlay()" value="再生"> <input type="button" onclick="audioPause()" value="停止"> <audio id="midori" preload="auto"> <!-- 2曲目 --> <source src="audio/midori.mp3" type="audio/mp3"></audio> <input type="button" onclick="audioPlay()" value="再生"> <input type="button" onclick="audioPause()" value="停止"> …以下同じ様にに7曲分… ------------------------- 現状では当然1曲目しか再生されません。 onclick="audioPlay()"がfunction audioPlay()を読みに行き、その中のgetElementById("aka")でID「aka」を指定して<audio id="aka" preload="auto">を実行している、というのは調べてわかったのですが、2曲目のID「midori」を再生するにはどうしたらいいのでしょうか。 audioPlay('aka')、audioPlay('midori')などとして引数を利用するのかな、と思ったのですが、getElementById("aka")がよくわからず・・・ 初心者で質問の内容すら上手く説明できたか不安なのですが、内容を察してくださる方お教え願えませんか。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- 複数ボタンのクリックイベント
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>
- 締切済み
- 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
- 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
- 音鳴らず。ソース見てください。
クリックで効果音を出したくて下記ソース書きましたが、音が出ません。 どこが間違ってるのでしょうか？使用しているブラウザはFirefoxです。よろしくお願いします。 <!DOCTYPE html> <head> <meta charset="Shift_JIS"> <script type="text/javascript"> function naru() { document.getElementById("mySound").play(); } </script> </head> <body> <audio id="mySound" preload="auto"> <source src="oto1.mp3" type="audio/mp3"> <source src="oto1.ogg" type="audio/ogg"> <source src="oto1.wav" type="audio/wav"> </audio> <form> <input type="button" value="oto" onclick="naru()"> </form> </body> </html>
- ベストアンサー
- HTML
- 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
- 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
- 「ポタン」で表示・非表示 (つづき)(^^;
「ポタン」で表示・非表示 ブロック<Div></Div>の「表示・非表示」を「ポタン」でやりたいのですが。。の件で、下記の回答をいただき、できたのですが、 最初に「★非表示」の状態にしたい場合は、どうしたらいいのでしょうか? よろしく願いいたします。 <html> <body> <div id="a">abcdefg</div> <input type="button" value="on/off" onClick="disp('a')"> <hr> <div id="b">abcdefg</div> <input type="button" value="on/off" onClick="disp('b')"> <hr> <script> function disp(id){ // alert(document.getElementById(id).style.display=='none'?'block':'none'); document.getElementById(id).style.display = document.getElementById(id).style.display=='none'?'block':'none'; } </script>
- ベストアンサー
- JavaScript
