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.1

ballville · ベストアンサー

if (color.checked === true) { selectedColor = color.value; }
の部分で、条件が真なら変数colorの中身は目指すinputエレメントが入っています。
欲しいのは、このinputエレメントではなく、次のテキストノードなので
selectedColor = color.nextSibling.textContent
とやれば、漢字の赤青黄の文言を取り出せます。