質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • JavaScript

    20953questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11863questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    7776questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

HTMLのボタンを無効化したい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 2,613

michiaki

score 21

前提・実現したいこと

現在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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kgtkr

    2016/09/19 11:52

    keyword_replace関数がありません

    キャンセル

回答 1

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/09/19 18:29

    うまく動きました。
    しかしなんでidからnameに変えるとうまくいくんですか?
    document.radiobutton.elements[2].disabled = true;おけるradiobuttonはnameということなんでしょうか?
    radiobuttonの場合はidで取得できているのに、ボタンの場合はnameにしないといけないのでしょうか?

    キャンセル

  • 2016/09/19 20:19

    > しかしなんでidからnameに変えるとうまくいくんですか?
    document.radiobuttonという書き方はフォームのname属性をもとに取得されるためです。(追記のリンク先参照)

    > radiobuttonの場合はidで取得できているのに
    document.forms.radiobutton と書かれている箇所でしょうか。フォームオブジェクトの挙動に詳しくありませんが、「ボタンの場合はname」とかではありません。

    キャンセル

  • 2016/09/20 17:33

    参照見逃してました。すいませんでした。私がラジオボタンを取得したいと質問した時に教えて頂いた回答の中に、document.forms.(参照するフォームのid).(ラジオボタンに付けたid名).checkedというのがあったので、formsでもidで設定する必要があると思い込んでました。多分id属性でも取得できるのかなと思います。
    ここらへんの自由度の高さ=複雑さだと個人的には思います。
    しかし丁寧にご教授頂き誠にありがとうございました。ベストアンサーにさせて頂きます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.47%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    20953questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    11863questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    7776questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。