javascript 問題と答え
独学でjsをやっているのですが、わからないところがあるので質問させてください。
ラジオボタンを選択し、解答ボタンクリックで、オレンジの欄に解答が出るようなプログラムを書いたのですが、実行されません。どこが間違っているのでしょうか。
/* ---------------- ▽▽▽ここから▽▽▽ -------------------------- */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js問題</title>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;padding:0;
}
img{ border:0;
}
h1 {
font-size:22px;
}
h2 {
font-size: 12px;
}
#box {
width: 500px;
overflow:hidden; /*子要素にfloatがあり、高さ算出のため使用*/
}
div.box {
width: 150px;
float: left;
background-color: #CCC;
margin-left: 10px;
}
li {
list-style:none;
}
div#ans {
width: 500px;
height: 20px;
clear:both;
margin-top: 20px;
margin-bottom: 30px;
}
div#ans p {
width: 150px;
background-color: #FC6;
margin-left:10px ;
float:left;
}
div#ans_btn {
width: 200px;
clear:both;
margin-left:200px;
}
</style>
</head>
<body>
<h1>Q.問題</h1>
<br />
<div id="box">
<div class="box">
<ul>
<h2>問題その１</h2>
<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 class="box">
<ul>
<h2>問題その2</h2>
<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 class="box">
<ul>
<h2>問題その3</h2>
<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>
<div id="ans">
<p>問い１答え</p>
<p>問い2答え</p>
<p>問い3答え</p>
</div>
<div id="ans_btn">
<input type="button" value="ここを押すと解答" onClick="saiten()">
</div>
<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.getElementById("q"+i).value){
p_node[i].innerHTML = "正解";
}else{
p_node[i].innerHTML = "間違い";
}
}
}
</script>
</body>
</html>
/* ----------------△△△ここまで△△△------------------------ */
よろしくおねがいします。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
b0a0aさん、ご回答頂き有難うございました。 どんくさい私は教えて頂きました記述ではどうも一つのDIVしか鳴らす事が出来ず教えて頂いたAUDIO_LISTの記述をそのまま使って DIVをネストしてCSSを変更しJavaScriptの下記部分を変更する事でなんとか別々に鳴らせる事が出来ました。 b0a0aさんのご回答を参照させて頂いてやっと鳴らせるところまでたどり着けました。 ご回答に感謝いたします。本当に助かりました。有難うございました。 また、分からない事が出てきたらご質問させて頂きます。お気付きの時はまたよろしくお願い致します。 有難うございました。 ■■変更したDIVです。 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ <div class="Box"><div class="wave" data="okwave1"><p class="font2">div=Box</p>ココは音が鳴ります。</div></div> <div class="sound1"><div class="wave" data="okwave2"><p class="font2">div=sound1</p><p>ココも音を鳴らしたいです。<br />よろしくお願いします。</p></div></div> <div class="sound2"><div class="wave" data="okwave3"><p class="font2">div=sound2</p><p>ココも音を鳴らしたいです。<br />よろしくお願いします。</p></div></div> ■■変更したCSSです。 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ .Box div.wave{ position: absolute; display: block; width: 250px; line-height: 150px; valign: middle; background-color: #000; text-align: center; color: #fff; font-size: 20px; font-weight: 700; margin-left: 50px; } .sound1 div.wave{ position: absolute; width: 300px; height: 250px; margin-left: 330px; background-color: #aaa; font-size: 20px; font-weight: 700; text-align: center; } .sound2 div.wave{ position: absolute; width: 300px; height: 250px; margin-left: 660px; background-color: #bbb; font-size: 20px; font-weight: 700; text-align: center; } ■■JavaScriptの変更部分です。 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ window.onload = function() { var eMenuList = $classAll("wave");