Task to write a test. Questions for three answers and depending on the selected answers, respectively, three conclusions.

The answer counter does not work correctly. The first question gives the correct value, and the subsequent ones give it differently.

What's my mistake?

I tried to take the result from the current page in this way, it did not help.

var pageN = $ ('.page' + n); switch ($( 'pageN input[name]:checked' ).val()) 

 var n = 1; var b = 0, m = 0, d = 0; $('#start-test').click(function() { $('.page').css("display", "none"); $('.page1').css("display", "block"); }); $('.arrow-right').click(function() { $('.page' + n).css("display", "none"); onChecked(); n++; $('.page' + n).css("display", "block"); switch ($("input[name]:checked").val()) { case 'B': alert('Бизнес'); b++; break; case 'D': alert('Дизайн'); d++; break; case 'M': alert('Медиа'); m++; break; } function onChecked() { console.log($("input:radio:checked").val()); } console.log(b, m, d); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <div class="page1"> <p class="orange-text">Вопрос 1</p> <label> <input type="radio" value="D" name="answer1">Ответ Д</label> <label> <input type="radio" value="B" name="answer1">Ответ Б</label> <label> <input type="radio" value="M" name="answer1">Ответ М</label> <img class="arrow-left-off" src="img/arr/back.png" alt="Назад"> <img class="arrow-right" src="img/arr/next.png" alt="Вперед"> </div> <div class="page2"> <p class="orange-text">Вопрос 2</p> <label> <input type="radio" value="B" name="answer2">Ответ Б</label> <label> <input type="radio" value="M" name="answer2">Ответ М</label> <label> <input type="radio" value="D" name="answer2">Ответ Д</label> <img class="arrow-left" src="img/arr/back.png" alt="Назад"> <img class="arrow-right" src="img/arr/next.png" alt="Вперед"> </div> <div class="page3"> <p class="orange-text">Вопрос 3</p> <label> <input type="radio" value="B" name="answer3">Ответ Б</label> <label> <input type="radio" value="M" name="answer3">Ответ М</label> <label> <input type="radio" value="D" name="answer3">Ответ Д</label> <img class="arrow-left" src="img/arr/back.png" alt="Назад"> <img class="arrow-right" src="img/arr/next.png" alt="Вперед"> </div> </html>

  • one
    You could add your html and wrap everything in the Фрагмент кода section. Then your question would look clearer and the answer to it will be given faster. - Denis Bubnov
  • I would say that you click on different blocks, and you always take the data from the first form. - Vasily Barbashev
  • I do not understand the principle. He writes down the first three values ​​of the answer to the first question, and the following values ​​are already taken by the other link - Maxim Bernashevsky
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

1 answer 1

As noted by @ Vasily Barbashev, although you hide / show different html fragments, the value of $("input[name]:checked").val() always taken from the first "input[name]:checked" on the page.

Limit the input selection to the parent of the button:

 switch ($(this).parent().find("input[name]:checked").val()) {

Or your version (corrected):

 var pageN = '.page' + n; switch ($(pageN + ' input[name]:checked').val()) {

but here we must carefully maintain the current value of n .

  • Thank you all! They corrected me a little bit and it all worked)) - Maxim Bernashevsky