###前提・実現したいこと
現在javascriptを使ってクイズを作成しています。
全ての問題を終了したとき、今まで使用していたボタンを無効化したいのですが、うまくいきません。
HTMLの概念とかも勉強しながらなので、色々と間違っているところもあると思います。
本当はもう少し質問したい部分があるのですが、先にこの問題についてお聞きします。
###発生している問題・エラーメッセージ
うまく動作しない(ボタンが押せる状態になっている)
###該当のソースコード
html
1<body> 2 <h1>問題集10</h1> 3 <p id="que">ここに問題が表示されます</p> 4 <form id="radiobutton"> 5 <div> 6 <input id="choice1" type="radio" name="choice" ><span id = "text1">○○○</span><br> 7 <input id="choice2" type="radio" name="choice" ><span id = "text2">××× </span><br> 8 <input type="button" value="回答する" onclick="button_click();"> 9 <input type="button" value="終了" onclick="end_study();"> 10 <p id="answer"></p> 11 <p id="last"></p> 12 </div>
javascript
1var i = 0; 2var judge ,rand, length; 3 4window.addEventListener("load", function() { 5 show_question(0); 6}, false); 7 8function end_study() { 9 document.getElementById('que').innerHTML = "問題は終了しました!!"; 10 document.getElementById('text1').innerHTML = "終了"; 11 document.getElementById('text2').innerHTML = "終了"; 12 document.getElementById('last').innerHTML = "疲れるので休憩を取りましょう!!"; 13 document.radiobutton.elements[2].disabled = true; 14 i = null; 15} 16 17function show_question(i) { 18 keyword_replace(i); 19 document.getElementById('que').innerHTML = q[i]; //test_1.jsの配列をそのまま取り込む 20 //問題の配置をランダムにする。 21 rand = Math.floor(Math.random() * 9); 22 judge = rand % 2; 23 //console.log("rand:"+rand); 24 //console.log("judge:"+judge); 25 if (judge == 0) { 26 document.getElementById('text1').innerHTML = exac_a[i]; //同上 27 document.getElementById('text2').innerHTML = miss_a[i]; //同上 28 } else if (judge == 1) { 29 document.getElementById('text1').innerHTML = miss_a[i]; //同上 30 document.getElementById('text2').innerHTML = exac_a[i]; //同上 31 //document.querySelector('label[for="choice1"]').innerHTML="選択肢B"; 32 } 33} 34 35function button_click() { 36 document.getElementById('answer').innerHTML = ""; 37 //document.forms.(参照するフォームのid).(ラジオボタンに付けたid名).checked 38 var radio1 = document.forms.radiobutton.choice1.checked; 39 var radio2 = document.forms.radiobutton.choice2.checked; 40 41 if ((judge == 0) && ( radio1 )) { 42 document.getElementById('answer').innerHTML = "前問の答え:正解でした"; 43 console.log("judge1=0,radio1:on"); 44 } else if ((judge == 1) && ( radio1 )) { 45 document.getElementById('answer').innerHTML = "前問の答え:間違いでした"; 46 console.log("judge=1,radio1:on"); 47 } else if ((judge == 0) && (radio2 ) ) { 48 document.getElementById('answer').innerHTML = "前問の答え:間違いでした"; 49 console.log("judge1=0,radio2:on"); 50 } else if((judge == 1) && (radio2 )){ 51 document.getElementById('answer').innerHTML = "前問の答え:正解でした"; 52 console.log("judge1=1,radio2:on"); 53 }else{ 54 console.log('default'); 55 } 56 i++; 57 58 if (i == q.length) { 59 setTimeout("end_study()",500); 60 }else{ 61 show_question(i); 62 } 63} 64
###試したこと
document.radiobutton.elements[2].disabled = true; を用いて、最終処理の関数は呼ばれていないものの本来はボタンがクリックできないはずなのに、クリックできる。
クリック自体ができるので、iがカウントし続け、配列エラーが出っ放しになる。たぶんほかの言語では重大なエラーになるはずだが、javascript内では警告で収まっているので、何とかしたい。
ボタンを無効化する記述はネット等で調べたが、自分のformと少し書き方が違うらしく、うまく動作していない。
本来の書き方(フォーム内に普通のボタンを含めていいのかどうか)が分からない。form内の部品が配列であるため、[2]を当てている。
回答1件
あなたの回答
tips
プレビュー