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

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

ただいまの
回答率

88.23%

javascriptでのラジオボタン取得方法について

解決済

回答 3

投稿

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

michiaki

score 29

前提・実現したいこと

javascriptにてクイズを作成しています。
ラジオボタンの選択している方を検出して、処理をしたいと思いますがなかなかうまくいきません。
ご教授宜しくお願います。

今問題の場所を上下にランダムで配置するようにし、正解側が選択され、回答ボタンが押されたら、answer
に正解・不正解を表示したく作成しています。

DOMの取得等について、いろいろ見ていますがいまいちピンときません。ネットで参考になりそうな
コードを調べてみても、ラジオボタンにformタグがついている前提で説明されています。
私のコードもwebアプリケーションにするわけでないのでラジオボタンにformタグはつけていませんが、
どの説明を見ても、formからの取得になっていて理解できません。(私の理解不足が原因ですが・・・)

同時にDOMを理解できるサイトとかあれば、教えて頂けないかと合わせてお願いします。
(今回のソフト作成時に教えて頂いた、document.getElementById('choice1').nextSibling.nodeValue 
id=choice1と定義されている次の子ノードのテキストノードのvalueを書き換えているのは理解できました。
id=choice1のラジオボタンが選択させた時に取得したいのはどれなのかは、よくわかっていません。
分かるようになりたいです)

もう一つ疑問点がありますが、これが理解出来たらお聞きします。

発生している問題・エラーメッセージ

特にエラーはなし、ラジオボタンの選択している部分をいろいろ試してみましたが理解できずにいます。

該当のソースコード

<h1>問題集1</h1>
        <p id="que">ここに問題が表示されます</p>
        <div>
            <input id="choice1" type="radio" name="choice" >○○○<br>
            <input id="choice2" type="radio" name="choice" >×××<br>
            <input type="button" value="回答する" onclick="button_click();">
        </div>
        <p id="answer"></p>
        <p id="last"></p>
    <footer><a href="index.html">最初へ</a></footer>
var i = 0;
var judge ,rand;
window.addEventListener("load", function() {
    show_question(0);
}, false);

function end_study(i) {
    document.getElementById('que').innerHTML = "問題はすべて終了しました!!";
    document.getElementById('choice1').nextSibling.nodeValue = "全問終了";
    document.getElementById('choice2').nextSibling.nodeValue = "全問終了";
    document.getElementById('answer').innerHTML = "";
    document.getElementById('last').innerHTML = "疲れるので休憩を取りましょう!!";
    i = 0;
}

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;
    if (judge == 0) {
        document.getElementById('choice1').nextSibling.nodeValue = exac_a[i]; //同上
        document.getElementById('choice2').nextSibling.nodeValue = miss_a[i]; //同上
    } else if (judge == 1) {
        document.getElementById('choice1').nextSibling.nodeValue = miss_a[i]; //同上
        document.getElementById('choice2').nextSibling.nodeValue = exac_a[i]; //同上
        //document.querySelector('label[for="choice1"]').innerHTML="選択肢B";
    }
        if (i == 4) {
            end_study(i);
        }
}

function button_click() {
    document.getElementById('answer').innerHTML = "";
    var radio1 = document.getElementById('choice1').value;
    var radio2 = document.getElementById('choice2').value;
    //console.log("judge:"+judge);
    console.log("mark1:"+radio1);
    console.log("mark2:"+radio2);
    if ((judge == 0) && ( radio1.value == 1)) {
        document.getElementById('answer').innerHTML = "全問の答え:正解でした";
    } else if ((judge == 0) && ( radio1.value == 0)) {
        document.getElementById('answer').innerHTML = "全問の答え:間違いでした";
    } else if ((judge == 1) && (radio2.value == 1) ) {
        document.getElementById('answer').innerHTML = "全問の答え:間違いでした";
    } else if((judge  == 1) && (radio2.value ==0)){
        document.getElementById('answer').innerHTML = "全問の答え:正解でした";
    }
    i++;
    show_question(i);
}
---------------------------------------文字変換用.js--------------------------------------------
/*
 *文字の置換
 */
 var str_q = new String();
 var str_exca_a = new String();
 var str_miss_a = new String();
 var i = 0;
 var keystart = null;
 var keyend = null;
 key1start ="<span id=\"keyword1\">";
 key2start ="<span id=\"keyword2\">";
 keyend ="</span>";

var keyword = {
    徐行:key1start + "徐行(すぐに停止できる速度:何kmとかはない)" +keyend,
    車両横断禁止:"車両横断禁止(しゃりょうおうだんきんし)",
    緊急自動車:"緊急自動車(きんきゅうじどうしゃ:パトカー、救急車、消防車)"
};

function keyword_replace(i) {
    var str_q = q[i];

    str_q = str_q.replace("徐行",keyword.徐行);
    str_q = str_q.replace("車両横断禁止",keyword.車両横断禁止);
    str_q = str_q.replace("緊急自動車",keyword.緊急自動車);
    q[i] = str_q;

    var str_exac_a = exac_a[i];
    str_exac_a = str_exac_a.replace("徐行",keyword.徐行);
    str_exac_a = str_exac_a.replace("車両横断禁止",keyword.車両横断禁止);
    str_exac_a = str_exac_a.replace("緊急自動車",keyword.緊急自動車);
    exac_a[i] =str_exac_a ;

    var str_miss_a = miss_a[i];
    str_miss_a = str_miss_a.replace("徐行",keyword.徐行);
    str_miss_a = str_miss_a.replace("車両横断禁止",keyword.車両横断禁止);
    str_miss_a = str_miss_a.replace("緊急自動車",keyword.緊急自動車);
    miss_a[i] = str_miss_a;
}

試したこと

value,cheakedなど色々試しましたが、自分の思う動きになりません。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

+1

judgeが0でchoice1が選択されていたら正解、judgeが1でchoice2が選択されていたら正解ということでしたら

function button_click() {
    var radio1 = document.getElementById('choice1');
    var radio2 = document.getElementById('choice2');

    if ((judge == 0) && ( radio1.checked)) {
        document.getElementById('answer').innerHTML = "全問の答え:正解でした";
    } else if ((judge == 0) && ( radio1.checked)) {
        document.getElementById('answer').innerHTML = "全問の答え:間違いでした";
    } else if ((judge == 1) && (radio2.checked) ) {
        document.getElementById('answer').innerHTML = "全問の答え:間違いでした";
    } else if((judge  == 1) && (radio2.checked)){
        document.getElementById('answer').innerHTML = "全問の答え:正解でした";
    }

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/08/28 11:04

    console.log(radio1.cheaked);で値を取得すると、undifinedとなり判定条件でも動作が機能していませんでした。問題のランダム表示を入れる前は確かこれで実行できた気がしますが、今はうまくif文で判定できません。

    キャンセル

  • 2016/08/28 11:22

    すいません私の勘違いでした。訂正致します。

    キャンセル

+1

すでに回答されている方もいらっしゃいますが、
「webアプリケーションにするわけでないのでラジオボタンにformタグはつけていません」
という部分ですが、別にwebアプリケーションにしなくてもラジオボタンをformタグで囲っても問題ありません。
(単にsubmitしないだけなので)
formタグでかこえないから難しいとの感じられているのであれば、囲ってしまうのも手かもしれません。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/08/28 22:18

    そうですね。個人的にformタグ=submitと思い込んでしまっていました。下の回答にて
    formタグつける方がスッキリ記述できるのなら、そちらを選択した方がいいと思います。
    あんまり自分の考え方にこだわり過ぎず、柔軟なプログラミングをしていきたいと思います。

    キャンセル

checkベストアンサー

0

ラジオボタンをformの中に入れて、下記コードで取得してみてはいかがですか?

document.forms.(参照するフォームのid).(参照するラジオボタンのid).checked

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/08/28 12:13

    説明が簡潔で実際うまく動作できましたので、ベストアンサーにさせて頂きます。

    キャンセル

  • 2016/08/28 17:00

    ベストアンサーありがとうございます。

    キャンセル

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

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

関連した質問

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