CODEWITHSUNDEEP
javascripthtml
swennemen
swennemen

Reputation: 955

Selecting radiobuttons using javascript.

I'm currently in the process of learning javascript. I want to create a dynamically quiz and now I want to check the value of my radiobuttons. This is my code:

HTML: 

<div class="intro">
<h1>Welcome at my JavaScript Quiz</h1>
<br>

<span id="questions"></span>

<form name="radioAnswers">
    <input type="radio" id="answer0" name="choice" value="a"><label for ="answer0" id="a0">Answer A</label>
    <input type="radio" id="answer1" name="choice" value="b"><label for ="answer1" id="a1">Answer B</label>
    <input type="radio" id="answer2" name="choice" value="c"><label for ="answer2" id="a2">Answer C</label>
    <input type="radio" id="answer3" name="choice" value="c"><label for ="answer3" id="a3">Answer D</label>
</form>

<div class="buttons">
<button onclick="checkAnswers()">Submit answer</button>
</div>

And the checkAnswers function to check the answer. From what I understand the document.forms.radioAnswers.elements.choice will create an HTMLcollection. I want to iterate over this arraylike list and want to see which one is checked, and then put this into the answer variable. Like this: 

function checkAnswers() {
    var methods = document.forms.radioAnswers.elements.choice;
    var answer;
    for (var i = 0; i<methods.length; i++) {
        if (methods[i].checked) {
            answer = methods[i].value;
        } else {
            answer = "error"
        }
    } alert(answer);
}

When I run this it alerts "error" all the time. What am I missing?

Upvotes: 0

Views: 111

Answers (2)

Niklas
Niklas

Reputation: 13135

You need to break the loop when you've found the answer, like this:

function checkAnswers() {
   var methods = document.forms.radioAnswers.elements.choice;
    var answer = "error";
    for (var i = 0; i<methods.length; i++) {
        if (methods[i].checked) {
            answer = methods[i].value;
            break;
        }
    }
    alert(answer);
}

DEMO

Upvotes: 2

laaposto
laaposto

Reputation: 12213

Try this:

function checkAnswers() {
   var answer="error";
    if (document.getElementById('answer0').checked) {
 answer = document.getElementById('answer0').value;
}
    if (document.getElementById('answer1').checked) {
 answer = document.getElementById('answer1').value;
}
    if (document.getElementById('answer2').checked) {
 answer = document.getElementById('answer2').value;
}
    if (document.getElementById('answer3').checked) {
 answer = document.getElementById('answer3').value;
}
    alert(answer);
}

DEMO

Upvotes: 1

Related Questions