Can I iterate +1 through a javascript query selector?

Question

So I have some radio buttons and I am currently checking to see if they are checked and am getting the value from it find using this:

var selectedAnswer = document.querySelector('input[name="question1"]:checked').value;

This returns what I want it to but I have several different forms, each with the name question1, question2, and so forth. Is there any way I can use that querySelectory method and have name="question" + 1 each time, such that I can loop through each question in every form. If I can find out if this is legal or not I can easily accomplish it with a for loop.

I have tried this:

for (let i = 1; i <= 5; i++) {
    var selectedAnswers = document.querySelector(`input[name="question${i + 1}]:checked`).value            
}

Yet it the the value is returning null, meaning the interpolation is failing.

"*not I can easily accomplish it with a for loop.*" why is `document.querySelector('input[name="question" + (i + 1) + ']:checked')` or `document.querySelector(\`input[name="question${i + 1}]:checked\`)` inside a loop not easily possible? — VLAZ, Oct 28 '21 at 18:25
Does this answer your question? [querySelector, wildcard element match?](https://stackoverflow.com/questions/8714090/queryselector-wildcard-element-match) — The Fool, Oct 28 '21 at 18:26
Hi thank you for the suggestions. I've been trying those. but then I can't use the .value to retrieve the information. It returns null when I attempt those above. — Connor, Oct 28 '21 at 18:36
Thinks as well this could be done in a loop, you might add the code of the versions you tried and which didn't work — Corrl, Oct 28 '21 at 18:47

score 1 · Answer 1 · edited Oct 28 '21 at 19:10

Just go for querySelectorAll() and a forEach() loop:

let questions = document.querySelectorAll('.questions')

questions.forEach((e)=>{
    e.addEventListener('change',function(){
        console.log(e.value);//modify here according to your need
    })
})

<input type="radio" name="question" value="1" class="questions">
<label>Q1</label>
<br>
<input type="radio" name="question" value="2" class="questions">
<label>Q2</label>
<br>
<input type="radio" name="question" value="3" class="questions">
<label>Q3</label>
<br>
<input type="radio" name="question" value="4" class="questions">
<label>Q4</label>

Talha Noyon · Answer 2 · 2021-10-28T19:41:12.317

Here is a solution, where no loops are there.

function handleChange(thisCheckbox) {
  console.log(thisCheckbox.value);
}

<input type="radio" name="question" value="1" class="questions" onchange="handleChange(this)">
<label>Q1</label>
<br>
<input type="radio" name="question" value="2" class="questions" onchange="handleChange(this)">
<label>Q2</label>
<br>
<input type="radio" name="question" value="3" class="questions" onchange="handleChange(this)">
<label>Q3</label>
<br>
<input type="radio" name="question" value="4" class="questions" onchange="handleChange(this)">
<label>Q4</label>

Can I iterate +1 through a javascript query selector?

2 Answers2