ページにHTMLデータを出力の方法につきまして
いつもお世話になっております。
現在、javascriptを使って5択の問題が出題できるコンテンツを作成しております。五択を選択し、ボタンを押すと、選択した番号や正解不正解をを同じフォーム上の下に表示させたいと思っております。
サイトを参照(http://www.openspc2.org/reibun/JavaScript_technique/sample/06_DOM/007/index.html)して、test01.html内では同じフォーム上に結果を出すことまではできたのですが、テストの種類を増やしたくて、test02.htmlを作りました。test01で使用したプログラムをコピーして、必要そうなID名などだけを変えてみたのですが、test02.htmlでは動いてくれず、行き詰まっていましました。
js側
window.onload = function()
{
document.getElementById("check").onclick = function()
{
//すべての解答を入れる変数の定義
var anserbox = ""
//問1
var checkList = ["q1_01","q1_02","q1_03","q1_04","q1_05"];
for(var i=0; i<checkList.length; i++)
{
var chkObj = document.getElementById(checkList[i]);
if (chkObj.checked)
{
anserbox += "問1は"+ chkObj.value + "を選択しました<br>";
if (chkObj.value == 1){ anserbox += "正解<br>"; }
//if (chkObj.value == 1){ point += 5; }
else anserbox += "不正解<br>正解は1です<br />";
}
}
//anserboxに格納された値をウィンドウに表示する
document.getElementById("result").innerHTML = anserbox;
}
document.getElementById("check2").onclick = function()
{
//すべての解答を入れる変数の定義
var anserbox = ""
//問1
var checkList = ["q1_01","q1_02","q1_03","q1_04","q1_05"];
for(var i=0; i<checkList.length; i++)
{
var chkObj = document.getElementById(checkList[i]);
if (chkObj.checked)
{
anserbox += "問1は"+ chkObj.value + "を選択しました<br>";
if (chkObj.value == 1){ anserbox += "正解<br>"; }
//if (chkObj.value == 1){ point += 5; }
else anserbox += "不正解<br>正解は1です<br />";
}
}
document.getElementById("result2").innerHTML = anserbox;
}
}
test01.html側
<form action="./enq.cgi" method="get">
<label><input type="radio" id="q1_01" name="q1" value="1">1</label><br>
<label><input type="radio" id="q1_02" name="q1" value="2">2</label><br>
<label><input type="radio" id="q1_03" name="q1" value="3">3</label><br>
<label><input type="radio" id="q1_04" name="q1" value="4">4</label><br>
<label><input type="radio" id="q1_05" name="q1" value="5">5</label><br>
<input type="button" id="check" value="チェック" >
</form>
<div id="result">結果:</div>
test02.html側
<form action="./enq.cgi" method="get">
<label><input type="radio" id="q1_01" name="q1" value="1">1</label><br>
<label><input type="radio" id="q1_02" name="q1" value="2">2</label><br>
<label><input type="radio" id="q1_03" name="q1" value="3">3</label><br>
<label><input type="radio" id="q1_04" name="q1" value="4">4</label><br>
<label><input type="radio" id="q1_05" name="q1" value="5">5</label><br>
<input type="button" id="check2" value="チェック" >
</form>
<div id="result2">結果:</div>
js側の3行目のdocument.getElementById("check").onclick = function()は実行されるのですがtest01.htmlはokなのですが、
中段にありますdocument.getElementById("check2").onclick = function()はボタンを押しても無反応です。(test02.html)
どちらも単体では実行可能でしたので、使い方に間違いがあるのかも知れません。今日一日でわからなかったら質問しようと思っていましたので、投稿致します。
どうかご教授宜しくお願い致します。