여러 라디오 버튼에 대한 응답으로 다음 페이지로 이동 HTML

Question

페이지 당 2 개의 선택 라디오 버튼 질문이있는 다중 페이지 설문 조사를 설정 중입니다. 첫 번째 페이지는 답변이 필요하지 않습니다. 나는 대답이 주어 졌는지 확인하는 다음 함수를 가지고있다. 그것은 작동하지만 두 개의 값을 전달하여 두 개의 질문을 확인하면 그 중 하나만 검사합니다. 함수를 통과하는 이름을 표시하기 위해 console.log를 사용했으며 하나의 이름 만 전달됩니다. 콘솔 로그의 이름에 따라 함수를 통과하는 질문이 아니더라도 질문 중 하나만 대답하여 다음 페이지로 이동할 수 있습니다. 내가 onclick에서 지정한 모든 질문을 확인하려면 어떻게해야합니까?

다음은 onclick에 대한 next() 함수가있는 계속 버튼 코드입니다. 나는 두 이름을 통과 할 때, 그것은 단지이가 라디오 버튼 인 2

<input type="button" value="Continue" onclick="next('Q1Answer','Q1Rating');"/> 

의 1을 확인합니다 :

질문 1 개

<input name="Q1Answer" type="radio" value="Right" /> Right&emsp; 
<input name="Q1Answer" type="radio" value="Wrong" /> Wrong 

질문 2

Less confident     
    <input class="rating" name="Qrating" type="radio" id="v1" value="1" /> 
    <input class="rating" name="Qrating" type="radio" id="v2" value="2" /> 
    <input class="rating" name="Qrating" type="radio" id="v3" value="3" /> 
    <input class="rating" name="Qrating" type="radio" id="v4" value="4" /> 
    <input class="rating" name="Qrating" type="radio" id="v5" value="5" /> 
&nbsp; &nbsp; More confident 

이것은 내 다음 버전의 기능입니다. 전달 된 모든 항목을 반복 할 수 있도록 for 루프를 추가했지만 문제가 해결되지 않았습니다 (루프없이 동일한 방식으로 작동 함). 이 코드는 HTML 코드에서 호출하는 자바 스크립트 파일에 있습니다.

function next(name) { 
    for (i in name) { 
     if (name.startsWith('Q')) { 
      if (!document.querySelectorAll('input[name]:checked').length) { 
       alert("Please answer the question."); 
       return; 
} 
} 
} 
    current++; 
    swap(effectivePage(current - 1), effectivePage(current)); 
} 

나는 식별자로 이름을 사용했습니다

(스왑 및 effectivePage 테스트에 필요한 경우 다음 페이지로 진행, 나는이 사람들을 추가 할 수있는 다른 기능입니다)하지만, 쉽게 ID하다면 대체 할 수 그러면 어떻게 든 쉽게 될 것입니다. 나는 실제 질문 만 확인하도록하기 위해 startsWith if 조건을 사용했습니다.

나는 기본적인 HTML 지식을 가지고 있으며 이것을 이해하려고 스스로 가르친 것 이상으로 자바 스크립트를 전혀 모르기 때문에 간단한 해결책이라고 기대하고있다.

Answer 1

그래서 나는 원하는대로 코드를 수행하지 못하게하는 2 가지 문제를 발견했습니다. HTML에서 다음 호출을 만들 때 여러 개의 이름 문자열을 전달하려고했지만 next 함수는 하나의 매개 변수 만 사용합니다. 즉, 귀하의 통화가이 경우 Q1Answer 였는지 확인하기위한 첫 번째 문자열 만 얻었습니다. 전달 된 값을 문자열 배열로 변경하면 필요한 모든 이름에 대해 검사를 수행 할 수 있습니다. 또한 정확한 이름 인을 다음 번 호출에서 확인할 입력에 전달해야합니다. 그 이름이 틀리면 코드는 입력을 결코 선택하지 않았다고 생각하기 때문에 사용자가 결코 다음 페이지에 도달 할 수 없도록합니다 (페이지에서 그 입력을 전혀 찾지 못하기 때문입니다).

둘째, 쿼리 선택기를 사용하여 확인을 수행 할 때 특정 이름을 확인하지 않았으므로 두 번째 입력 태그를 확인해야하는 경우에도 선택한 첫 번째 값을 항상 찾습니다. 이 검사를 수정하여 전달 된 이름을 구체적으로 살펴 보았으므로 문제의 입력과 일치합니다 (즉, 첫 번째 패스는 Q1Answer를 확인하고 두 번째 패스는 Qrating을 확인할 것임).

function next(name) { 
 
    for (i in name) { 
 
    if (name[i].startsWith('Q')) { 
 
     if (!document.querySelectorAll('input[name=' + name[i] + ']:checked').length) { 
 
     alert("Please answer the question."); 
 
     return; 
 
     } 
 
    } 
 
    } 
 
    current++; 
 
    swap(effectivePage(current - 1), effectivePage(current)); 
 
}

<input type="button" value="Continue" onclick="next(['Q1Answer','Qrating']);" /> 
 

 
<input name="Q1Answer" type="radio" value="Right" /> Right&emsp; 
 
<input name="Q1Answer" type="radio" value="Wrong" /> Wrong 
 

 
<br/> Less confident &nbsp; &nbsp; 
 
<input class="rating" name="Qrating" type="radio" id="v1" value="1" /> 
 
<input class="rating" name="Qrating" type="radio" id="v2" value="2" /> 
 
<input class="rating" name="Qrating" type="radio" id="v3" value="3" /> 
 
<input class="rating" name="Qrating" type="radio" id="v4" value="4" /> 
 
<input class="rating" name="Qrating" type="radio" id="v5" value="5" /> &nbsp; &nbsp; More confident