JavaScript radio input

Question

I am working on an assignment where I have to build a quiz app. I display questions one at a time. The user has to select one of the 4 answers from a group of radio inputs.

For some reason it only works when user selects first radio input, other get no response..

Here is my code :

var counter = 0;
var questions = ["<h3>What is the 9 + 10 </h3>\n\
                   <input type='radio' name = 'radio' class='rad' value ='19'>19\n\
                    <input type='radio' name = 'radio' class='rad' value ='23'> 23\n\
                    <input type='radio' name = 'radio' class='rad' value ='44'>66\n\
                    <input type='radio' name = 'radio' class='rad' value ='1'>123 ",
    "<h3>What is the 5 + 10 </h3>\n\
                   <input type='radio' name = 'radio' class='rad' value ='15'>15\n\
                    <input type='radio' name = 'radio' class='rad' value ='23'> 23\n\
                    <input type='radio' name = 'radio' class='rad' value ='44'>44\n\
                    <input type='radio' name = 'radio' class='rad' value ='1'>12 "
];

document.getElementById("question").innerHTML = questions[counter];
document.querySelector('.rad').addEventListener("change", nextQuestion);

function nextQuestion() {
    console.log(counter);
    counter++;
    document.getElementById("question").innerHTML = questions[counter];
}

I am displaying question one at a time, it has 4 radio inputs as answers, to proceed to next question I have to select one of the inputs, in my case only first input allows me to proceed, other do nothing. — filipes95, Dec 19 '17 at 02:37

score 2 · Accepted Answer · answered Dec 19 '17 at 02:31

document.querySelector('.rad') only refers to the very first radio button (the one saying 19, and none other). You probably want event delegation.

Replace document.querySelector('.rad').addEventListener("change", nextQuestion); by document.getElementById("question").addEventListener("change", nextQuestion);.

This works due to the change event bubbling up to the question element.

score -1 · Answer 2 · answered Dec 19 '17 at 02:59

Add document.querySelector('.rad').addEventListener("change", nextQuestion); into the function. So, it's kind of recursive call and put a condition to break out.

var counter = 0;

var questions = ["<h3>What is the 9 + 10 </h3>\n\
                   <input type='radio' name = 'radio' class='rad' value ='19'>19\n\
                    <input type='radio' name = 'radio' class='rad' value ='23'> 23\n\
                    <input type='radio' name = 'radio' class='rad' value ='44'>66\n\
                    <input type='radio' name = 'radio' class='rad' value ='1'>123 ",
    "<h3>What is the 5 + 10 </h3>\n\
                   <input type='radio' name = 'radio' class='rad' value ='15'>15\n\
                    <input type='radio' name = 'radio' class='rad' value ='23'> 23\n\
                    <input type='radio' name = 'radio' class='rad' value ='44'>44\n\
                    <input type='radio' name = 'radio' class='rad' value ='1'>12 ",
                    "<h3>What is the 12 + 10 </h3>\n\
                   <input type='radio' name = 'radio' class='rad' value ='15'>25\n\
                    <input type='radio' name = 'radio' class='rad' value ='23'> 23\n\
                    <input type='radio' name = 'radio' class='rad' value ='44'>64\n\
                    <input type='radio' name = 'radio' class='rad' value ='1'>22 ",
                    "<h3>What is the 52 + 10 </h3>\n\
                   <input type='radio' name = 'radio' class='rad' value ='15'>25\n\
                    <input type='radio' name = 'radio' class='rad' value ='23'> 23\n\
                    <input type='radio' name = 'radio' class='rad' value ='44'>64\n\
                    <input type='radio' name = 'radio' class='rad' value ='1'>62 "
];


nextQuestion();

function nextQuestion() {
if(questions.length != counter) {
    console.log(counter);
    document.getElementById("question").innerHTML = questions[counter];
    document.querySelector('.rad').addEventListener("change", nextQuestion);
        counter++;
   }
}

<div id="question"></div>

`document.querySelector('.rad')` will still only refer to a single element. — Sebastian Simon, Dec 19 '17 at 03:04
I don't think so. Run the snippet it works fine. Full running code is given. Not like your answer. See and then down vote. — abc xyz, Dec 19 '17 at 03:15
Did _you_ try to run your own snippet? Nothing’s happening when you press “23”, “66” or “123” on the first question. Only “19” works, which is the OP’s original problem. Granted, your code works for the first option of _every_ question now, but it’s only the _first_ option, nonetheless. That’s what I meant when I was writing _“will still only refer to a **single element**”_. Did you interpret that as something else? — Sebastian Simon, Dec 19 '17 at 03:20

JavaScript radio input

2 Answers2