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