JavaScriptラジオ入力

Question

私はクイズのアプリケーションを構築する必要がある課題に取り組んでいます。私は質問を1つずつ表示します。ユーザは、無線入力のグループから4つの回答のうちの1つを選択しなければならない。それだけで、ユーザが最初のラジオの入力を選択したときに、他の応答がない作品何らかの理由で

..ここ

が私のコードです：

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]; 
} 

Answer 1

document.querySelector('.rad')だけの非常に最初のラジオボタンを指し、（ 1つは19と言っています。おそらくevent delegationが必要です。

document.querySelector('.rad').addEventListener("change", nextQuestion);をdocument.getElementById("question").addEventListener("change", nextQuestion);に置き換えます。

これは、changeイベントbubbling up〜questionの要素のために機能します。

Answer 2

document.querySelector('.rad').addEventListener("change", nextQuestion);を関数に追加します。だから、再帰呼び出しのようなもので、中断する条件を付けます。

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>