ボタンをクリックしても値を取得することができない。

いつもお世話になってます。javascript初学者です。
現在、ラジオボタンを押したら画面上に取得した値を表示させるプログラムを作成中です。

やりたいこと

任意のラジオボタンを選択し、addボタンを押すと選択した値を取得したい。
取得したい値は赤を選択したらred,青を選択したらblue,黄を選択したらyellowです。

今、困っていること

ラジオボタンを選択しaddボタンを押すもundefinedを返す。

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

特になし

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>ラジオボタンから値を取得</title>
6</head>
7<body>
8<p>addボタンを押したらリストが追加されます。</p>
9    <input type="radio" name="color" value="red">赤
10    <input type="radio" name="color" value="blue">青
11    <input type="radio" name="color" value="yellow">黄
12<button>add</button>
13<ul></ul>
14<script type="text/javascript" src="main.js"></script>
15</body>
16</html>

javascript
1function addCreateFunc(){
2    const inputs = document.querySelectorAll('input');
3    const element_li = document.createElement("li");
4    element_li.innerHTML = inputs.value;
5    const ul = document.getElementsByTagName("ul")[0];
6    ul.appendChild(element_li);  
7}
8
9window.onload = function() {
10    var button = document.getElementsByTagName("button")[0];
11    button.addEventListener('click', addCreateFunc, false);
12}

試したこと①

inuptsの要素を動的に取得するためfor文を使って下記のように書き換えました。
for文を使用すればインデックスを参照するので狙い通りの挙動になるかと思いましたがうまく挙動しませんでした。

javascript
1for (let index = 0; index < inputs.length; index++) {
2    const element_li = document.createElement("li");
3    element_li.innerHTML = inputs[index].value;
4    const ul = document.getElementsByTagName("ul")[0];
5    ul.appendChild(element_li);  
6}

試したこと②

厳密に判定するためif文を使用するもダメでした。。。
初歩的な質問で申し訳ございませんが、ご教示のほどよろしくお願いします。

javascript
1    for (let index = 0; index < inputs.length; index++) {
2        if(inputs.checked == true){
3            const element_li = document.createElement("li");
4            element_li.innerHTML = inputs[index].value;
5            const ul = document.getElementsByTagName("ul")[0];
6            ul.appendChild(element_li);  
7        }
8    }

kei344

2020/05/24 09:01

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

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

回答2件

ベストアンサー

別解

javascript
1function addCreateFunc(){
2    const inputs = document.querySelectorAll('input:checked');
3    const element_li = document.createElement("li");
4    element_li.innerHTML = inputs[0].value;
5    const ul = document.getElementsByTagName("ul")[0];
6    ul.appendChild(element_li);  
7}
8
9window.onload = function() {
10    var button = document.getElementsByTagName("button")[0];
11    button.addEventListener('click', addCreateFunc, false);
12}
13

【変更点】

javascript
1const inputs = document.querySelectorAll('input:checked');

とチェックされているラジオボタンのみ取得するようにした。

javascript
1    element_li.innerHTML = inputs[0].value;

querySelectorAll は結果が１つだけでも NodeList として返ってくるため、最初の要素をしめすように inputs[0] に変更した。

投稿2020/05/23 11:45

Yasumichi

総合スコア1773

JavaScript
1for (let index = 0; index < inputs.length; index++) {
2    const element_li = document.createElement("li");
3    if( !inputs[index].checked ) continue;
4    element_li.innerHTML = inputs[index].value;
5    const ul = document.getElementsByTagName("ul")[0];
6    ul.appendChild(element_li);  
7}
8```**動くサンプル：**[https://jsfiddle.net/zfrdns6u/](https://jsfiddle.net/zfrdns6u/)