尝试设置增量控制器

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

正如 cmets 中已经回答的那样，问题是一个错字，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>