HTMLのボタンを無効化したい
解決済
回答 1
投稿
- 評価
- クリップ 0
- VIEW 3,966
前提・実現したいこと
現在javascriptを使ってクイズを作成しています。
全ての問題を終了したとき、今まで使用していたボタンを無効化したいのですが、うまくいきません。
HTMLの概念とかも勉強しながらなので、色々と間違っているところもあると思います。
本当はもう少し質問したい部分があるのですが、先にこの問題についてお聞きします。
発生している問題・エラーメッセージ
うまく動作しない（ボタンが押せる状態になっている）該当のソースコード
<body>
<h1>問題集10</h1>
<p id="que">ここに問題が表示されます</p>
<form id="radiobutton">
<div>
<input id="choice1" type="radio" name="choice" ><span id = "text1">○○○</span><br>
<input id="choice2" type="radio" name="choice" ><span id = "text2">××× </span><br>
<input type="button" value="回答する" onclick="button_click();">
<input type="button" value="終了" onclick="end_study();">
<p id="answer"></p>
<p id="last"></p>
</div>var i = 0;
var judge ,rand, length;
window.addEventListener("load", function() {
show_question(0);
}, false);
function end_study() {
document.getElementById('que').innerHTML = "問題は終了しました!!";
document.getElementById('text1').innerHTML = "終了";
document.getElementById('text2').innerHTML = "終了";
document.getElementById('last').innerHTML = "疲れるので休憩を取りましょう!!";
document.radiobutton.elements[2].disabled = true;
i = null;
}
function show_question(i) {
keyword_replace(i);
document.getElementById('que').innerHTML = q[i]; //test_1.jsの配列をそのまま取り込む
//問題の配置をランダムにする。
rand = Math.floor(Math.random() * 9);
judge = rand % 2;
//console.log("rand:"+rand);
//console.log("judge:"+judge);
if (judge == 0) {
document.getElementById('text1').innerHTML = exac_a[i]; //同上
document.getElementById('text2').innerHTML = miss_a[i]; //同上
} else if (judge == 1) {
document.getElementById('text1').innerHTML = miss_a[i]; //同上
document.getElementById('text2').innerHTML = exac_a[i]; //同上
//document.querySelector('label[for="choice1"]').innerHTML="選択肢B";
}
}
function button_click() {
document.getElementById('answer').innerHTML = "";
//document.forms.(参照するフォームのid).(ラジオボタンに付けたid名).checked
var radio1 = document.forms.radiobutton.choice1.checked;
var radio2 = document.forms.radiobutton.choice2.checked;
if ((judge == 0) && ( radio1 )) {
document.getElementById('answer').innerHTML = "前問の答え：正解でした";
console.log("judge1=0,radio1:on");
} else if ((judge == 1) && ( radio1 )) {
document.getElementById('answer').innerHTML = "前問の答え：間違いでした";
console.log("judge=1,radio1:on");
} else if ((judge == 0) && (radio2 ) ) {
document.getElementById('answer').innerHTML = "前問の答え：間違いでした";
console.log("judge1=0,radio2:on");
} else if((judge == 1) && (radio2 )){
document.getElementById('answer').innerHTML = "前問の答え：正解でした";
console.log("judge1=1,radio2:on");
}else{
console.log('default');
}
i++;
if (i == q.length) {
setTimeout("end_study()",500);
}else{
show_question(i);
}
}試したこと
document.radiobutton.elements[2].disabled = true; を用いて、最終処理の関数は呼ばれていないものの本来はボタンがクリックできないはずなのに、クリックできる。
クリック自体ができるので、iがカウントし続け、配列エラーが出っ放しになる。たぶんほかの言語では重大なエラーになるはずだが、javascript内では警告で収まっているので、何とかしたい。
ボタンを無効化する記述はネット等で調べたが、自分のformと少し書き方が違うらしく、うまく動作していない。
本来の書き方(フォーム内に普通のボタンを含めていいのかどうか）が分からない。form内の部品が配列であるため、[2]を当てている。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+3
<form id="radiobutton"> ⇒ <form name="radiobutton">
追記：
【とほほのJavaScript入門(フォーム関連)】
http://sound.jp/otaq/tohoho/wwwjsfor.htm
[window.]document.form (e3/N2)
個々のフォームオブジェクト。 例えば <FORM NAME=form1> と生成したフォームは、次のいずれかの書式で指定する。(0 はドキュメント中の最初のフォームを表す)
document.forms[0]
document.forms["form1"]
document.form1
【フォーム（Form）】
http://www.tohoho-web.com/js/form.htm
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.21%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
kgtkr
2016/09/19 11:52
keyword_replace関数がありません