Checking if a radio button selection matches an item in an array using JavaScript or jQuery

Question

At this point I am just testing to see if I can compare the radio button selected with the correct answer in the array. See comments below:

var allQuestions = [{
        "question": "Who was Luke's wingman in the battle at Hoth?",
        "choices": ["Dak", "Biggs", "Wedge", "fx-7"],
        "correctAnswer": 0
    }];


function answerFwd() {
    var answerOutput = " ";
    var itemAnswers = allQuestions;
    var answer = 0;
    var playerTally = 0;
    var playerFeedback = "";
    var playerMessage = document.getElementById("playerMessage");


    // Is this the correct way to store the radio button which is selected?
    var radioValue = $("input[type='radio'].radioButtons").is(':checked');

    var right = false;

    if (currentAnswer <= itemAnswers.length) {
        currentAnswer++;
    }

    createRadioButtonFromArray(itemAnswers[currentQuestion].choices);

    //Then compare value in array with radioValue value
    if(radioValue == itemAnswers.correctAnswer){
          right = true;
    }           

    if(right) {
        alert("You answered correctly");
    } else {
        alert("Wrong answer");
    }

}

I suspect my mistake is I am not comparing correctAnswer:3 with the radioValue correctly. What would make sense is the index of the button matched with value. Would a for-loop be the best way? Thanks in advance!

UPDATE

This is the code which creates the buttons:

 function createRadioButtonFromArray(array) {
   var len = array.length; 
   var responses = document.getElementById("responses"); 
   responses.innerHTML = ''; 
    for (var i = 0; i < len; i++) {
     radio = document.createElement("input"); 
     radio.type = "radio";
     radio.name = "choices"; 
     radio.className = "radioButtons"; 
     radio.value = i; 
     radio.id = "choice" + i; 
     var radioText = document.createElement("div"); 
     radioText.id = "c" + i; 
     radioText.className = "choiceText"; 
     radioText.innerHTML = array[i]; 
     responses.appendChild(radio); 
     responses.appendChild(radioText); 
   }
}

And this how it renders:

<div id="responses">
<input type="radio" name="choices" class="radioButtons" value="0" id="choice0">
<div id="c0" class="choiceText">The Avenger</div>
<input type="radio" name="choices" class="radioButtons" value="1" id="choice1">
<div id="c1" class="choiceText">Devastator </div>
<input type="radio" name="choices" class="radioButtons" value="2" id="choice2">
<div id="c2" class="choiceText">Conquest</div>
<input type="radio" name="choices" class="radioButtons" value="3" id="choice3">
<div id="c3" class="choiceText">The Executor</div>

*"`
The Avenger
`"* The element you're looking for there is [`label`](http://www.w3.org/TR/html5/forms.html#the-label-element). — T.J. Crowder, Apr 04 '15 at 22:22

score 0 · Answer 1 · answered Apr 04 '15 at 21:44

0

Is this the correct way to store the radio button which is selected?
var radioValue = $("input[type='radio'].radioButtons").is(':checked');

No, that would be:

var radioValue = $("input[type='radio'].radioButtons:checked").val();

More

answered Apr 04 '15 at 21:44

T.J. Crowder

1,031,962
187
1,923
1,875

That worked sort of, I guess I am still not correctly matching the values of the radio button with the value in array. Any ideas? – Antonio Pavicevac-Ortiz Apr 04 '15 at 21:53
To give some background I am trying to make a quiz...if that's not obvious by now.. :) – Antonio Pavicevac-Ortiz Apr 04 '15 at 21:54
@AntonioOrtiz: It would help a *lot* if you showed the radio buttons. – T.J. Crowder Apr 04 '15 at 22:06

Checking if a radio button selection matches an item in an array using JavaScript or jQuery

1 Answers1