JavaScripでラベル名（赤、青、黄）を取得したい。

以下に記述しているHTMLとJavaScriptでは
valueの値、red, blue, yellowしか取得できません。

HTMLからvalue属性を外すと”on”しか出てきません。

このようなHTMLが記述されている場合、どうすればラベル名(赤、青、黄)を取得できますか？

分かる方いらっしゃいましたら教えて下さい。
宜しくお願いします。



(HTML) 　
<input type="radio" name="color" value="red">赤
<input type="radio" name="color" value="blue">青
<input type="radio" name="color" value="yellow">黄

<button>Add!</button>

<ul>
</ul>
-------------------------------------
(JS)


'use strict';
{
document.querySelector('button').addEventListener('click', () => {
const colors = document.querySelectorAll('input');

let selectedColor;
colors.forEach(color => {
if (color.checked === true) {
selectedColor = color.value;
}
});

const li = document.createElement('li');
li.textContent = selectedColor;

document.querySelector('ul').appendChild(li);

});
}

No.2 回答者： fujillin 回答日時： 2020/10/09 08:59

No1です

こっちの方がちょっとだけ短いかも。

document.querySelector('button').addEventListener('click', ()=>{
let s = document.querySelector('input:checked');
if(s){
const li = document.createElement('li');
li.textContent = s.nextSibling?s.nextSibling.textContent:"";
document.querySelector('ul').appendChild(li);
}
});

No.1 回答者： fujillin 回答日時： 2020/10/08 17:55

こんにちは

表示文字とinput要素は単に並んでいるだけで、包含関係などはない上に#textはHTML要素（＝HTMLElement）でもないので、ご提示のままだとちょっと面倒ですね。

document.querySelector('button').addEventListener('click', ()=>{
let s = document.querySelector('input:checked');
if(s){
let c = s.parentNode.childNodes;
const li = document.createElement('li');
li.textContent = c[[...c].indexOf(s)+1].textContent;
document.querySelector('ul').appendChild(li);
}
});

HTMLの構成を
<label><input type="radio" name="color" value="red">赤</label>
などにしておくほうが、確実かつ簡単になると思います。