javascriptでチェックボックスが選択されているかを取得したい

###前提・実現したいこと
javascriptでクイズを作成しています。
htmlにラジオボタンを置き、選択された方をjavascriptで受け取りたくやってますが
うまくできません。
choice1かchoice2を選択されたのを確認して正解or不正解を表示したく考えております。

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

エラーメッセージは特にないですが、nullが入ったままです。

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

Html5
<html lang="ja">
    <head>
        <title>クイズ</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="test_1.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body>
        <div>
           <h1>問題集1</h1>>
           <p id="que">ここに問題が表示されます</p> 
           <div id="choice1"> <input type="radio" name="s1" >ここに選択肢1が表示されます</div><br>
           <div id="choice2"> <input type="radio" name="s1" >ここに選択肢2が表示されます</div>
        </div>
    </body>
</html>
javascript
window.addEventListener("load",function() {
  document.getElementById('que'). innerHTML = "文字列の変更を行います";
},false);

 var select1 = document.getElementById('choice1');
 console.log(select1);

###試したこと
innerHTMLにて文字表示が変わることは確認できました。
radioボタン選択を変更してもconsole.log(select1)はnullのまま。
まだ基本がよくわかっていません。

###補足情報(言語/FW/ツール等のバージョンなど)
エディタはnetbeansを使用しています。

行動規範の内容に同意します

回答1件

ベストアンサー

まず、ラジオボタンをとりたいなら、idはdivではなくラジオボタンのinputタグに設定してあげてください。
以下はその前提で話を進めます。

文字列の変更を addEventListnerを使って loadイベント（画面がロードされたときに発生する）の中で実行しているように、
アクションがあってからなにかしらのイベントを使って確認しなければ、変更後の値は確認できません。

今は、javascriptの一番外側の場所に書かれていますので、ページが読み込まれる過程で実行されています。
(test1かmainのいずれかのファイルに入っているんだと思いますがそれでも同じです）
これは、ラジオボタンのタグよりも前にあるので、その段階ではラジオボタンがそもそもありません（ページを作っている最中なので）。

javascriptコンソールが表示できるなら、ラジオボタンの値を変えた後で、javascriptコンソールで

> console.log(document.getElementById('choice1'));

としてみれば、なにか表示されると思います（ラジオボタンのinputタグの情報が丸ごととれるのでたくさん表示されると思いますが）

イベントについて詳しくはほかのサイトや本などで参照してもらうとして、
「ボタンを押したらラジオボタンの値をコンソールに出す」なら、

html

           <div> <input id="choice2" type="radio" name="s1" >ここに選択肢2が表示されます</div>
           <div> <input type="button" onclick="button_click();" ></div><!--この行を追加-->
        </div>

javascript

function button_click(){
  var radio = document.getElementById('choice2');
  console.log(radio.checked);
}

とすると、ボタンを押すとchoice2のチェック状態をとることができます。
タグの方の onclick で、クリックしたとき（クリックイベントが起きたとき）関数を実行することにしておいて、
そのときbutton_click関数を実行するようにしています。
addEventListener と設定方法は異なりますが、どちらもあるオブジェクト(window / button)のイベント( load / click )に対して実行する事 ( function(){ ~ } / button_click() ) を設定してあげている点では同じです。
どちらを使うかはその時に応じて変わります（楽な方とかソースが見やすい方とか選び方はさまざま）

参考にしてみてください。

投稿2016/08/11 06:51

flied_onion

総合スコア2604

michiaki

2016/08/11 10:33

ご回答ありがとうございます。まだ知識が足りず、わからないところだらけですが、頑張ってみます。 inputの中で、idのつけ方が分からなかったので強引に<div>でタグ作って入れてました。ご指摘ありがとうございます。上記の処理に完全に理解したわけではないですが、自分のやりたいことはできるようになりました。ご返答誠にありがとうございました。

行動規範の内容に同意します