ページに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)

どちらも単体では実行可能でしたので、使い方に間違いがあるのかも知れません。今日一日でわからなかったら質問しようと思っていましたので、投稿致します。
どうかご教授宜しくお願い致します。

回答No.1

leap_day · ベストアンサー

こんにちは

window.onload=function() {
document.getElementById("check").onclick = function(){}
document.getElementById("check2").onclick = function(){}
}

でイベントのセットをしているわけですが
同じページにこの2つの問いがあれば『id="check"』『id="check2"』の両方があるためwindow.onload内のスクリプトはすべて実行されます(下の問いとcheck2の方のcheckListのidを変更すればどちらも実行されると思います

ですがtest01.htmlの方では『id="check"』の方しかありません
そのためdocument.getElementById("check2").onclick = function()の方のセットは行われずスクリプトエラーになります
ですが先にdocument.getElementById("check").onclick = function()の方のセットは完了しているのでtest01.htmlの方はボタンを押すとスクリプトが一応実行されます

test02.htmlの方では『id="check2"』しかありませんので
document.getElementById("check").onclick = function()のセットが出来ない為スクリプトエラーになります
そうなるとその後にあるdocument.getElementById("check2").onclick = function()も実行されていないことになり『id="check2"』のonClickがセットされていないのでボタンを押しても何の反応もありません

同じスクリプトを使っているという事は外部ファイルにしているのでしょうか？

・
空要素
(test01.htmlに)<div id="check2"></div>
(test02.htmlに)<div id="check"></div>
を追加するか(別に<div>でなくてもid="check"もしくはid="check2"と定義されたものがあればいいです)

・
test01.htmlとtest02.htmlとで別々のスクリプトにするか

・
(test01.htmlに)window.onload=function() { check(); }
(test02.htmlに)window.onload=function() { check2(); }
として
質問のスクリプトを
function check() {
document.getElementById("check").onclick = function() {
(略)
}
}
function check2() {
document.getElementById("check2").onclick = function() {
(略)
}
}
のようにしてください

お礼

丁寧な解説有り難うございました。仕事から帰ってきて早速試してみたところうまくできました。window.onload=function() { check(); }のタグを
head内に入れfunction check() {
document.getElementById("check").onclick = function() {
(略)
}
}と教えていただいた通りにしたところ2つとも動きました！
本当に有難うございました。
これでテストはいくつも作れそうです。
また機会がありました宜しくお願い致します。