- ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：複数のボタンで音声とポップアップを同時に出す方法）
複数のボタンで音声とポップアップを同時に出す方法
このQ&Aのポイント
- 大阪府地図形当てクイズを作成しています。ボタンをクリックすると音声が鳴るところまではうまく行きましたが、同じボタンで同時に「正解」などの表示を出す方法について教えてください。
- コードを下に示しますが、<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('不正解'); }
