- ベストアンサー
JavaScript問題の解答プログラムで実行されない問題
- 独学でJavaScriptを勉強中ですが、ラジオボタンを選択し解答ボタンをクリックすると、解答が表示されるプログラムを書いたのですが、実行されません。
- HTMLとJavaScriptを組み合わせた問題の解答プログラムで、ラジオボタンの選択に応じて解答を表示するという機能を実装しています。
- 質問者さんが書いたプログラムは、ラジオボタンのvalue属性とJavaScriptの処理を組み合わせて、解答を表示する仕組みになっています。しかし、何らかの理由でプログラムが実行されないようです。
- komado45oji4768
- お礼率94% (35/37)
- JavaScript
- 回答数4
- ありがとう数17
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
ざっくりこんな感じの処理でどうでしょう？ <script> var ans = ["2","3","1"]; function saiten(f){ for(var i=0;i<ans.length;i++){ var q=f.elements["q"+i]; for(j=0;j<q.length;j++){ if(q[j].checked){ document.getElementById("a"+i).innerHTML = (ans[i]==q[j].value)?"正解":"間違い"; break; } } } } </script> <form> <h1>Q.問題</h1> <h2>問題その１</h2> <div> <ul> <li><input type="radio" name="q0" value="1">あいうえお</li> <li><input type="radio" name="q0" value="2">正解</li> <li><input type="radio" name="q0" value="3">あいうえお</li> <li><input type="radio" name="q0" value="4">あいうえお</li> </ul> </div> <div> <h2>問題その2</h2> <ul> <li><input type="radio" name="q1" value="1">あいうえお</li> <li><input type="radio" name="q1" value="2">あいうえお</li> <li><input type="radio" name="q1" value="3">正解</li> <li><input type="radio" name="q1" value="4">あいうえお</li> </ul> </div> <div> <h2>問題その3</h2> <ul> <li><input type="radio" name="q2" value="1">正解</li> <li><input type="radio" name="q2" value="2">あいうえお</li> <li><input type="radio" name="q2" value="3">あいうえお</li> <li><input type="radio" name="q2" value="4">あいうえお</li> </ul> </div> <div> <p id="a0">問い1答え</p> <p id="a1">問い2答え</p> <p id="a2">問い3答え</p> </div> <div> <input type="button" value="ここを押すと解答" onClick="saiten(this.form)"> </div> </form>
その他の回答 (3)
- Picosoft
- ベストアンサー率70% (274/391)
ラジオボタンの場合、どの項目が選択されているかを一発で取得する方法はありません。 (つまり、document.elements['q'+i].valueでは取得できないということです) なので、#2さんのご回答のようにcheckedプロパティを1つずつチェックすることになります。
お礼
お返事ありがとう御座います。 なるほど、分かりました。 ＃２さんの方法でやってみようと思います。 解答いただきありがとうございました。
- yambejp
- ベストアンサー率51% (3827/7415)
#2です ＞よろしければ私のやりかたで間違っている部分を指摘してもらえるとうれしいです。 間違っているのは、まさに#1さんが指摘している箇所です。 document.getElementById("q"+i) とidを指定してタグを指定しようとしていますが、そんなid振られたものはないし ラジオボタンで同じ名前を持っているので、idで処理はできないです ラジオボタンのデータを走査して、合致したら処理してbreakというのが 妥当な方法＝#2で示したソースです
お礼
お返事ありがとう御座います。 なるほど、分かりました。 ＃２さんの方法でやってみようと思います。 解答いただきありがとうございました。
- Picosoft
- ベストアンサー率70% (274/391)
> <input type="button" value="ここを押すと解答" onClick="saiten()"> この行に全角スペースが混じっています。 > if(ans[i]==document.getElementById("q"+i).value){ nameが"q0"になっている要素ならありますが、idが"q0"になっている要素は存在しません。
お礼
解答いただきありがとうございました。 ＃２さんの答えで進めていこうと思います。
補足
お返事ありがとうございます。 ご意見を参考に、全角をとり、 script部分を以下にしましたが、 まだ動いてくれません。 どこがいけないのでしょうか。 <script type="text/javascript"> var ans = ["2","3","1"]; function saiten(){ var p_node=document.getElementsByTagName("p"); for(var i=0;i<ans.length;i++){ if(ans[i]==document.elements['q'+i].value){ p_node[i].innerHTML = "正解"; }else{ p_node[i].innerHTML = "間違い"; } } } </script> よろしくお願いします。
お礼
お返事ありがとう御座います。 なるほど、selectedを使った方がより明確で具体的で分かりやすいですね。参考にさせていただきます。 ありがとう御座いました。 よろしければ私のやりかたで間違っている部分を指摘してもらえるとうれしいです。