Попытка установить инкрементный контроллер

Question

Я создаю простое приложение викторины, и пока оно великолепно, но у меня проблема с переходом к следующему вопросу.как ни странно, когда пользователь правильно отвечает на вопрос и нажимает кнопку «Отправить», он переходит к следующему вопросу, но если он снова отвечает правильно, он ничего не делает.

Вот мой код:

  <div class="app">
      <h2 id="question"></h2>
          <button class="options" type="button" value="val"></button>
          <button class="options" type="button" value="val"></button>
          <button class="options" type="button" value="val"></button>
          <button class="options" type="button" value="val"></button>
        </br>
            <button id="submit" type="button" name="button">Submit</button>
            <button id="back" type="button" name="button">Back</button>
    </div>



var data = {
  currentQuestion: 0,
  questions:[
    {
      answers:[1,3,5,6],
      question:'how much is 3+3',
      correctAnswer:6
     },
    {
      answers:[1,3,5,2],
      question:'how much is 1+1',
      currectAnswer:2
    },
     {
       answers:[1,8,5,6],
       question:'how much is 4+4',
       correctAnswer:8
     },
     {
       answers:[1,8,10,6],
       question:'how much is 4+6',
       correctAnswer:8
     }
  ]
}


var options = document.querySelectorAll('.options');
var question = document.querySelector('#question');
var backBtn = document.querySelector('#back');
var submitBtn = document.querySelector('#submit');





function init() {
  newQuestion();
  optionClick();
  evaluate();
  back();

}


function newQuestion() {
  question.textContent = data.questions[data.currentQuestion].question;
  for(var i = 0; i< data.questions.length; i++) {
    options[i].textContent = data.questions[data.currentQuestion].answers[i]
  }
}



function optionClick() {
    options.forEach(function(elem) {
      elem.addEventListener('click', function() {
        this.classList.toggle('picked')
      })
    })

}


function evaluate() {
  submitBtn.addEventListener('click', function() {
    for(i = 0; i < options.length; i++) {
      if(options[i].classList.contains('picked') && options[i].textContent == data.questions[data.currentQuestion].correctAnswer && data.currentQuestion <= 6){
        options[i].classList.remove('picked')
        data.currentQuestion++
        newQuestion();
      }
    }
  })
}

Answer 1

Как уже было сказано в комментариях, проблема была в опечатке, currectAnswer, а не correctAnswer.Сейчас это своего рода спорный ответ, но я также хотел предложить некоторые другие улучшения.

Первое, что я бы сделал, вместо использования группы кнопок, используйте группу переключателей.Вы можете настроить их так, чтобы они выглядели как кнопки, плюс вы получаете бесплатную функциональность, делая это.С помощью радиокнопок выбирается только один ответ без необходимости проверять наличие нескольких ответов в коде.

Вместо использования именованных функций, которые при вызове присоединяют анонимную функцию в качестве обработчика событий, просто создайте именованную функцию и затем присоединитеих непосредственно к элементам.

Если собрать их вместе, это будет выглядеть примерно так:

'use strict';
var data = {
  currentQuestion: 0,
  questions:[
    {
      answers:[1,3,5,6],
      question:'how much is 3+3',
      correctAnswer:6
     },
    {
      answers:[1,3,5,2],
      question:'how much is 1+1',
      correctAnswer:2
    },
     {
       answers:[1,8,5,6],
       question:'how much is 4+4',
       correctAnswer:8
     },
     {
       answers:[1,8,10,6],
       question:'how much is 4+6',
       correctAnswer:10
     }
  ]
}


var options = document.querySelectorAll('#options input');
var question = document.querySelector('#question');
var backBtn = document.querySelector('#back');
var submitBtn = document.querySelector('#submit');

function nextQuestion () {
  if (data.currentQuestion < data.questions.length - 1) {
    data.currentQuestion += 1;
    displayQuestion();
  } else {
    data.currentQuestion = data.questions.length;
    submitBtn.removeEventListener('click', evaluate);
    backBtn.removeEventListener('click', prevQuestion);
    question.textContent = "Done!"
  }
}

function prevQuestion () {
  if (data.currentQuestion > 0) {
    data.currentQuestion -= 1;
    displayQuestion();
  }
}

function displayQuestion () {
  question.textContent = data.questions[data.currentQuestion].question;

  options.forEach(function (option, index) {
    let answer = data.questions[data.currentQuestion].answers[index];
    // set the value of the radio button
    option.value = answer;
    // set the text of the label next to it
    option.nextElementSibling.textContent = answer;
    // reset the selected value
    option.checked = false
  });
}

function evaluate () {
  let correctAnswer = data.questions[data.currentQuestion].correctAnswer;
  // get the value of the currently selected answer
  let selectedAnswer = document.querySelector('#options :checked');

  if(selectedAnswer && selectedAnswer.value == correctAnswer){
    nextQuestion();
  }
}

submitBtn.addEventListener('click', evaluate);
backBtn.addEventListener('click', prevQuestion);
displayQuestion();

  fieldset {
    border: none;
  }

  /* highlight the label immediately after the selected radio button */
  #options input:checked + label {
    border: 3px red solid;
  }

  /* hide the actual radio button 
     that the labels are controling. */
  #options input {
    display: none;
  }

  /* make the label look like a button */
  #options label {
    padding: .5em;
    background: #eee;
    border: outset 1px #eee;
  }

<div class="app">
  <h2 id="question"></h2>
  <fieldset id="options">
    <input id="answer1" type="radio" name="answers"> <label for="answer1"></label>
    <input id="answer2" type="radio" name="answers"> <label for="answer2"></label>
    <input id="answer3" type="radio" name="answers"> <label for="answer3"></label>
    <input id="answer4" type="radio" name="answers"> <label for="answer4"></label>
  </fieldset>

  <button id="submit" type="button" name="button">Submit</button>
  <button id="back" type="button" name="button">Back</button>
</div>