CODEWITHSUNDEEP
javascriptradio-button
chillinOutMaxin
chillinOutMaxin

Reputation: 182

querySelectorAll find which button is selected JavaScript

I am just learning JavaScript and I am having an issue with radio buttons and JavaScript. I have the following code:

var cbLoop = document.querySelectorAll('[name="question1"]');
    for(var x in cbLoop){
        if(x.checked){ <-- I assume this is the problem?
            answers[0] = x.value;
        }
    }

question1 refers to 5 radio buttons. I want to find which button was selected when the user clicks the submit button. I guess, I cant call .checked using the for loop I have.

Could anybody help?

Upvotes: 0

Views: 533

Answers (2)

Mamun
Mamun

Reputation: 68923

With for ... in loop you are iterating through the keys not the actual item. You can use Aarry#forEach like the following:

document.getElementById('btnSubmit').addEventListener('click', function(){
  var cbLoop = document.querySelectorAll('[name="question1"]');
  var answers =[];
  cbLoop.forEach(function(radio){
    if(radio.checked){ 
        answers[0] = radio.value;
    }
  });
  console.log(answers);
});
<input type="radio" name="question1">1</input>
<input type="radio" name="question1">2</input>
<input type="radio" name="question1" checked>3</input>
<input type="radio" name="question1">4</input>
<input type="radio" name="question1">5</input>
<br>
<input type="submit" id="btnSubmit" value="submit" />

OR: With for loop

document.getElementById('btnSubmit').addEventListener('click', function(){
  var cbLoop = document.querySelectorAll('[name="question1"]');
  var answers = [];
  for(var i = 0; i < cbLoop.length; i++){
    if(cbLoop[i].checked){ 
        answers[0] = cbLoop[i].value;
    }
  }
  console.log(answers);
});
<input type="radio" name="question1">1</input>
<input type="radio" name="question1">2</input>
<input type="radio" name="question1" checked>3</input>
<input type="radio" name="question1">4</input>
<input type="radio" name="question1">5</input>
<br>
<input type="submit" id="btnSubmit" value="submit" />

Upvotes: 2

Racil Hilan
Racil Hilan

Reputation: 25351

You can use the standard for loop:

function check() {
  var cbLoop = document.querySelectorAll('[name="question1"]');
  var answers = [];
  for (var x = 0; x < cbLoop.length; x++) {
    if (cbLoop[x].checked) {
      answers[0] = cbLoop[x].value;
    }
  }
  console.log(answers);
}
<input type="radio" name="question1" value="Q1" checked>1</input>
<input type="radio" name="question1" value="Q2">2</input>
<input type="radio" name="question1" value="Q3">3</input>
<input type="radio" name="question1" value="Q4">4</input>
<br /><br />
<button type="button" onclick="check();">Check</button>

However, there can never be more than one value selected using the radio buttons, so why are you using an array for the answer? You can use a simple variable: 

function check() {
  var cbLoop = document.querySelectorAll('[name="question1"]');
  var answer;
  for (var x = 0; x < cbLoop.length; x++) {
    if (cbLoop[x].checked) {
      answer = cbLoop[x].value;
    }
  }
  console.log(answer);
}
<input type="radio" name="question1" value="Q1" checked>1</input>
<input type="radio" name="question1" value="Q2">2</input>
<input type="radio" name="question1" value="Q3">3</input>
<input type="radio" name="question1" value="Q4">4</input>
<br /><br />
<button type="button" onclick="check();">Check</button>

Upvotes: 1

Related Questions