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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

HTML

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

Q&A

解決済

3回答

2946閲覧

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

michiaki

総合スコア29

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2016/08/27 05:50

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

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

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

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

もう一つ疑問点がありますが、これが理解出来たらお聞きします。
###発生している問題・エラーメッセージ

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

###該当のソースコード

HTML

1 <h1>問題集1</h1> 2 <p id="que">ここに問題が表示されます</p> 3 <div> 4 <input id="choice1" type="radio" name="choice" >○○○<br> 5 <input id="choice2" type="radio" name="choice" >×××<br> 6 <input type="button" value="回答する" onclick="button_click();"> 7 </div> 8 <p id="answer"></p> 9 <p id="last"></p> 10 <footer><a href="index.html">最初へ</a></footer>

javascript

1var i = 0; 2var judge ,rand; 3window.addEventListener("load", function() { 4 show_question(0); 5}, false); 6 7function end_study(i) { 8 document.getElementById('que').innerHTML = "問題はすべて終了しました!!"; 9 document.getElementById('choice1').nextSibling.nodeValue = "全問終了"; 10 document.getElementById('choice2').nextSibling.nodeValue = "全問終了"; 11 document.getElementById('answer').innerHTML = ""; 12 document.getElementById('last').innerHTML = "疲れるので休憩を取りましょう!!"; 13 i = 0; 14} 15 16function show_question(i) { 17 keyword_replace(i); 18 document.getElementById('que').innerHTML = q[i]; //test_1.jsの配列をそのまま取り込む 19 //問題の配置をランダムにする。 20 rand = Math.floor(Math.random() * 9); 21 judge = rand % 2; 22 if (judge == 0) { 23 document.getElementById('choice1').nextSibling.nodeValue = exac_a[i]; //同上 24 document.getElementById('choice2').nextSibling.nodeValue = miss_a[i]; //同上 25 } else if (judge == 1) { 26 document.getElementById('choice1').nextSibling.nodeValue = miss_a[i]; //同上 27 document.getElementById('choice2').nextSibling.nodeValue = exac_a[i]; //同上 28 //document.querySelector('label[for="choice1"]').innerHTML="選択肢B"; 29 } 30 if (i == 4) { 31 end_study(i); 32 } 33} 34 35function button_click() { 36 document.getElementById('answer').innerHTML = ""; 37 var radio1 = document.getElementById('choice1').value; 38 var radio2 = document.getElementById('choice2').value; 39 //console.log("judge:"+judge); 40 console.log("mark1:"+radio1); 41 console.log("mark2:"+radio2); 42 if ((judge == 0) && ( radio1.value == 1)) { 43 document.getElementById('answer').innerHTML = "全問の答え:正解でした"; 44 } else if ((judge == 0) && ( radio1.value == 0)) { 45 document.getElementById('answer').innerHTML = "全問の答え:間違いでした"; 46 } else if ((judge == 1) && (radio2.value == 1) ) { 47 document.getElementById('answer').innerHTML = "全問の答え:間違いでした"; 48 } else if((judge == 1) && (radio2.value ==0)){ 49 document.getElementById('answer').innerHTML = "全問の答え:正解でした"; 50 } 51 i++; 52 show_question(i); 53} 54---------------------------------------文字変換用.js-------------------------------------------- 55/* 56 *文字の置換 57 */ 58 var str_q = new String(); 59 var str_exca_a = new String(); 60 var str_miss_a = new String(); 61 var i = 0; 62 var keystart = null; 63 var keyend = null; 64 key1start ="<span id=\"keyword1\">"; 65 key2start ="<span id=\"keyword2\">"; 66 keyend ="</span>"; 67 68var keyword = { 69 徐行:key1start + "徐行(すぐに停止できる速度:何kmとかはない)" +keyend, 70 車両横断禁止:"車両横断禁止(しゃりょうおうだんきんし)", 71 緊急自動車:"緊急自動車(きんきゅうじどうしゃ:パトカー、救急車、消防車)" 72}; 73 74function keyword_replace(i) { 75 var str_q = q[i]; 76 77 str_q = str_q.replace("徐行",keyword.徐行); 78 str_q = str_q.replace("車両横断禁止",keyword.車両横断禁止); 79 str_q = str_q.replace("緊急自動車",keyword.緊急自動車); 80 q[i] = str_q; 81 82 var str_exac_a = exac_a[i]; 83 str_exac_a = str_exac_a.replace("徐行",keyword.徐行); 84 str_exac_a = str_exac_a.replace("車両横断禁止",keyword.車両横断禁止); 85 str_exac_a = str_exac_a.replace("緊急自動車",keyword.緊急自動車); 86 exac_a[i] =str_exac_a ; 87 88 var str_miss_a = miss_a[i]; 89 str_miss_a = str_miss_a.replace("徐行",keyword.徐行); 90 str_miss_a = str_miss_a.replace("車両横断禁止",keyword.車両横断禁止); 91 str_miss_a = str_miss_a.replace("緊急自動車",keyword.緊急自動車); 92 miss_a[i] = str_miss_a; 93} 94

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

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

投稿2016/08/28 02:59

miyasaka

総合スコア271

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

michiaki

2016/08/28 13:18

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

0

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

javascript

1function button_click() { 2 var radio1 = document.getElementById('choice1'); 3 var radio2 = document.getElementById('choice2'); 4 5 if ((judge == 0) && ( radio1.checked)) { 6 document.getElementById('answer').innerHTML = "全問の答え:正解でした"; 7 } else if ((judge == 0) && ( radio1.checked)) { 8 document.getElementById('answer').innerHTML = "全問の答え:間違いでした"; 9 } else if ((judge == 1) && (radio2.checked) ) { 10 document.getElementById('answer').innerHTML = "全問の答え:間違いでした"; 11 } else if((judge == 1) && (radio2.checked)){ 12 document.getElementById('answer').innerHTML = "全問の答え:正解でした"; 13 }

投稿2016/08/27 06:53

attercop

総合スコア246

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

michiaki

2016/08/28 02:04

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

2016/08/28 02:22

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

0

ベストアンサー

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

javascript

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

投稿2016/08/27 06:29

Diawel

総合スコア190

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

michiaki

2016/08/28 03:13

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

2016/08/28 08:00

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問