Javascript - 积分计算不起作用

Question

我做了一个简单的调查，每个问题的答案都会给你不同的分数。我不想让这些点在值本身中所以我把它放进了javascript。

我找不到为什么在控制台中querySelector抛出null的错误:未捕获的类型错误:document.querySelector(…)是null

HTML代码:

<fieldset id="question1">
<p style="font-weight:600;">What's your favorite color?</p>
<label><input type="radio" name="q1" id="q1a1" required>Red</label><br>
<label><input type="radio" name="q1" id="q1a2" required>Blue</label><br>
</fieldset>
<fieldset id="question2">
<p style="font-weight:600;">How old are you?</p>
<label><input type="radio" name="q2" id="q2a1">over 18</label><br>
<label><input type="radio" name="q2" id="q2a2">under 18</label><br>
</fieldset>

Name表示问题编号，id表示问题编号和答案编号。

Javascript

var points = {
"q1": {"q1a1": 0, "q1a2": 1},
"q2": {"q2a1": 0, "q2a2": 3}
};
var totalPoints = 0;
function calculatePoints() {
for (var i = 1; i <= numQuestions; i++) {
var selectedAnswer = document.querySelector('input[name="q' + i + '"]:checked').id;
totalPoints += points[selectedAnswer];
}
}

我试图将点数的计算添加到侦听器本身，但它也抛出相同的错误。只是想要根据selectedAnswer和计算从变量采取的点数，并发送到下一页的结果。

Answer 1

即使在没有选中单选框的复选框上也可以计算点->找不到DOM节点->零→在null时调用.id。所以，你要么检查每个"问题"有一个答案或添加一个检查，如果document.querySelector(...)返回null。它在代码片段中添加了一个if子句，并在条件后面调用.id。

var points = {
"q1": {"q1a1": 0, "q1a2": 1},
"q2": {"q2a1": 0, "q2a2": 3}
};
var totalPoints = 0;
function calculatePoints() {
for (var i = 1; i <= 2; i++) {
let questionKey = `q${i}`;
var selectedAnswer = document.querySelector(`input[name="${questionKey}"]:checked`);
// that's what I added
if (selectedAnswer) {
totalPoints += points[questionKey][selectedAnswer.id]; // calling .id here
};
}
console.log({ totalPoints });
}

<fieldset id="question1">
<p style="font-weight:600;">What's your favorite color?</p>
<label><input type="radio" name="q1" id="q1a1" required>Red</label><br>
<label><input type="radio" name="q1" id="q1a2" required>Blue</label><br>
</fieldset>
<fieldset id="question2">
<p style="font-weight:600;">How old are you?</p>
<label><input type="radio" name="q2" id="q2a1">over 18</label><br>
<label><input type="radio" name="q2" id="q2a2">under 18</label><br>
</fieldset>
<button type="button" onclick="calculatePoints()">
calculate
</button>