Can't get the value or index of radio buttons on the page. [Javascript]

Question

I'm working on a quiz app, but I can't seem to get the value or the index of the radio buttons on the page.

Here's my code:

HTML:

<div id="container">
    <div id="quiz"></div>
    <div id="choices"></div>
    <input id="next" type="button" value="Next">
    <input id="back" type="button" value ="Back">
    <div id="results"></div>
</div>

JavaScript:

var allQuestions = [
    {
        question: "Who is the best in the world?",
        choices: ["CM Punk", "John Cena", "Daniel Bryan", "Roman Reigns"],
        correctAnswer: 0
    },

    {
        question: "Who is the current WWE World Champion?",
        choices: ["John Cena", "Brock Lesnar", "Triple H"],
        correctAnswer: 1
    },

    {
        question: "Where is Toronto located?",
        choices: ["Ontario", "California", "Georgia", "Texas"],
        correctAnswer: 0
    },

    {
        question: "What is the largest California city?",
        choices: ["Los Angeles", "San Fransico", "San Deigo", "Anahiem"],
        correctAnswer: 0
    }
];

var quiz = document.getElementById('quiz');
var choicesContainer = document.getElementById('choices');
var nextButton = document.getElementById('next');
var backButton = document.getElementById('back');
var score = 0;
var questionIndex = 0;        

// A function to show the question.

function showQuiz() {
    var currentQuestion = allQuestions[questionIndex].question;
    quiz.textContent = currentQuestion;

    choicesContainer.innerHTML = "";
    var choicesNum = allQuestions[questionIndex].choices.length;

    for (var i = 0; i < choicesNum; i++) {
        var choice = allQuestions[questionIndex].choices[i];
        choicesHTML = "<input type='radio' name='choice'>" + choice + "</br>";
        choicesContainer.innerHTML += choicesHTML;
    }    
}

function checkScore() {
    //var correctAnswers = allQuestions[questionIndex].correctAnswer;

    var radios = document.querySelectorAll('[type=radio]');
    var userAnswers;

    for (var i = 0; i < radios.length; i++) {
        if(radios[i].checked) {
            userAnswers = radios[i].value;
            console.log(userAnswers);
        }
    }
}

showQuiz();

nextButton.addEventListener('click', function(){
    questionIndex++;
    showQuiz();
    checkScore();
});

backButton.addEventListener('click', function(){
    questionIndex--;
    showQuiz();
});

First, I thought it was because I was calling the checkAnswers() function before the DOM was ready, but that doesn't seem the be the case so I'm stuck.

Any help, would be awesome and greatly appreciated. Thanks!

score 1 · Accepted Answer · edited May 23 '17 at 12:27

You have an error in your logic.

allQuestions[questionIndex] is undefined, when you click "next" after the last question. You need to check, if theres a question left.

and i think your selector for the radio buttons is wrong. watch this: javascript check radio buttons automatically

you need something like

radios = document.getElementsByTagName('INPUT');
    for (var i = 0; i < radios.length; i++) {
        if(radios[i].type == "radio"){
            if(radios[i].checked) {
                userAnswers = radios[i].value; 
            }
        }
    }

or you select only the checked element with

checkedbutton = document.querySelector("input[name='choice']:checked");

and further: you should add the answers as "value" of the button, like

<input type="radio" name="choice" value="Ontario">

this way you can get the value easy with

checkedbutton.value;

Thanks for you answer! So do I add a function that does that to the "next" event handler or the showQuiz function? — DevonAero, Jan 11 '15 at 22:58
something like `if(questionIndex <= questioncount)` wrapped around the showquiz() call — cari, Jan 11 '15 at 23:03

Can't get the value or index of radio buttons on the page. [Javascript]

1 Answers1