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>
/* ----------------△△△ここまで△△△------------------------ */
よろしくおねがいします。
お礼
コードの内容をちゃんと理解できていればわかったはずのエラーですね。 今後はエラーの内容をもっと理解できるように意識していこうと思います。 ありがとうございました。