Question

나는 퀴즈 앱을 만들어야하는 과제를 수행하고 있습니다. 한 번에 하나씩 질문을 표시합니다. 사용자는 무선 입력 그룹에서 4 개의 대답 중 하나를 선택해야합니다.

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') 만 매우 첫 번째 라디오 버튼을 의미합니다 (: 사용자는 다른 응답을 얻을 수없고, 제 무선 입력을 선택하는 경우에만 작동 어떤 이유

은 .. 여기서

내 코드 하나는 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>