Javascript - points calculation doesn't work

I created a simple survey, where every answer to a question gives you different amount of the points. I don't want the points to be in the value itself so I put it into the javascript.

I cannot find the error why in the console the querySelector throws null:
Uncaught TypeError: document.querySelector(...) is null

HTML code:

<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 represent question number and id represent question number together with answer number.

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];
	}
}

I tried to add the calculation of the points into the listener itself but it also throws the same error. Just want the number of points being taken from variable based on the selectedAnswer and calculated and send to the next page with results.

You calculate the points even on checkboxes that don't have a checked radiobox -> can't find a DOM Node -> null -> calls .id on null. So, you either check that every "question" has an answer OR add a check if the document.querySelector(...) returns null. It added an if-clause in the snippet and called the .id after the condition.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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 });
}

<!-- language: lang-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>

<button type="button" onclick="calculatePoints()">
  calculate
</button>

<!-- end snippet -->