如何使用事件侦听器存储单选按钮的值

Question

当有人单击其中一个单选按钮时，我想获取该选定按钮的值，以便能够将其存储在变量中。

当我运行下面的代码时，它返回错误"questionOne.addEventListener 不是函数"。

{
const init = () => {
const questionOne = document.querySelectorAll(`input[name="vraag1"]`);
const valueOne = questionOne.addEventListener('click', () => {
let selected = document.querySelector(`input[type="radio"]:checked`);
return selected.value;
});
};
init();
}

<section class="question__one">
<h2 class="question__title ">1. Hoeveel mensen heb je vrolijk gemaakt met je heldendaad?</h2>
<form class="options__one" method="get" action="zelftest.html">
<div class="options__div">
<input class="input__hidden" type="radio" id="optie1" name="vraag1" value="1">
<label for="optie1">Alleen mezelf</label>
</div>
<div class="options__div">
<input class="input__hidden" type="radio" id="optie2" name="vraag1" value="2">
<label for="optie2">Minder dan 5</label>
</div>
<div class="options__div">
<input class="input__hidden" type="radio" id="optie3" name="vraag1" value="3">
<label for="optie3">Tussen 5 en 10 mensen</label>
</div>
<div class="options__div">
<input class="input__hidden" type="radio" id="optie4" name="vraag1" value="4">
<label for="optie4">Meer dan 10</label>
</div>
</form>
</section>

Answer 1

因为 querySelectorAll 将从 HTMl 模板返回一个实例集合，所以很明显你可以在集合上执行此操作。相反，您必须遍历该集合并连接您的事件

或者你可以查询一个选择器，然后你可以连接你的事件

Answer 2

您只能addEventListener单个元素(特定目标)。

你可以循环你的questionOne

const questionOne = document.querySelectorAll(`input[name="vraag1"]`);
questionOne.forEach(item => {
const valueOne = item.addEventListener('click', () => {
...
});
});

Answer 3

使用事件委派为所有单选按钮添加处理程序。您可以只检索单击的单选按钮的值。该代码段还会检索所单击选项的标签的文本值。

使用事件委派，您不必为所有[name=vraag1]添加事件侦听器。这可以防止您在使用返回Nodelistdocument.querySelectorAll时遇到的问题，该应该循环([yourNodeList].forEach)，或者对于单个单选按钮，应该使用[yourNodeList][index]检索。

document.addEventListener("click", evt => {
console.clear();
//  event delegation: only act if the click originated from input[type=radio]
if (evt.target.type === "radio") {
console.log(`Value: ${evt.target.value}, text: ${
document.querySelector(`label[for='${evt.target.id}']`).textContent}`);
}
})

<section class="question__one">
<h2 class="question__title ">1. Hoeveel mensen heb je vrolijk gemaakt met je heldendaad?</h2>
<form class="options__one" method="get" action="zelftest.html">
<div class="options__div">
<input class="input__hidden" type="radio" id="optie1" name="vraag1" value="1">
<label for="optie1">Alleen mezelf</label>
</div>
<div class="options__div">
<input class="input__hidden" type="radio" id="optie2" name="vraag1" value="2">
<label for="optie2">Minder dan 5</label>
</div>
<div class="options__div">
<input class="input__hidden" type="radio" id="optie3" name="vraag1" value="3">
<label for="optie3">Tussen 5 en 10 mensen</label>
</div>
<div class="options__div">
<input class="input__hidden" type="radio" id="optie4" name="vraag1" value="4">
<label for="optie4">Meer dan 10</label>
</div>
</form>
</section>