JavaScript Trivia游戏答案判断错误问题排查与修复-html教程-PHP中文网

JavaScript Trivia游戏答案判断错误问题排查与修复

心靈之曲

发布： 2025-10-13 08:35:01

原创

689人浏览过

javascript trivia游戏答案判断错误问题排查与修复

本文旨在解决JavaScript Trivia游戏中答案判断始终返回第一个答案为正确的错误。通过分析问题代码，找出`checkAnswer`函数中`currentQuestion`变量的错误使用，并提供修改后的代码示例，帮助开发者理解和修复类似问题，确保Trivia游戏逻辑的正确性。

在开发Trivia游戏时，一个常见的错误是答案判断逻辑不正确，导致无论选择哪个答案，程序总是认为第一个答案是正确的。这通常是因为在答案检查函数中，对当前问题的索引处理不当。以下将详细分析问题原因，并提供解决方案。

问题分析

在提供的代码片段中，checkAnswer函数存在一个关键错误：

立即学习“Java免费学习笔记（深入）”；

function checkAnswer(bntIndex) {
  nextButton.classList.remove('hide');
  const currentQuestion = 0; // 错误：总是使用第一个问题
  answer = questions[currentQuestion].answers[bntIndex];
  if(answer.correct === true) {
    incrementPoints();
    result.textContent = "Correct!";
  } else {
    result.textContent = "Incorrect";
  }
}

登录后复制

该函数定义了一个常量 currentQuestion 并将其赋值为 0。这意味着无论用户点击哪个答案按钮，checkAnswer 函数总是会检查 questions 数组中第一个问题的答案，导致只有第一个问题的第一个答案才会被判定为正确。

解决方案

要解决这个问题，需要将 currentQuestion 变量替换为实际当前问题的索引。由于 randomQuestion 变量在 nextQuestion 函数中存储了当前问题，因此可以直接使用 randomQuestion 来访问当前问题的答案。

Find JSON Path Online

Easily find JSON paths within JSON objects using our intuitive Json Path Finder

193

查看详情

修改后的 checkAnswer 函数如下：

function checkAnswer(bntIndex) {
  nextButton.classList.remove('hide');
  // const currentQuestion = 0; // 删除此行
  answer = randomQuestion.answers[bntIndex]; // 使用 randomQuestion
  if(answer.correct === true) {
    incrementPoints();
    result.textContent = "Correct!";
  } else {
    result.textContent = "Incorrect";
  }
}

登录后复制

完整代码示例 (包含上下文)

为了更好地理解修改后的代码，这里提供一个包含上下文的完整示例：

<!DOCTYPE html>
<html>
<head>
<title>Trivia Game</title>
</head>
<body>
  <div id="question-container">
    <div id="question"></div>
    <div id="answers">
      <button id="answers-btn-1" onclick="checkAnswer(0)" class="answers-btn"></button>
      <button id="answers-btn-2" onclick="checkAnswer(1)" class="answers-btn"></button>
      <button id="answers-btn-3" onclick="checkAnswer(2)" class="answers-btn"></button>
      <button id="answers-btn-4" onclick="checkAnswer(3)" class="answers-btn"></button>
    </div>
    <button id="next-button" class="hide">Next</button>
    <div id="result"></div>
  </div>

  <script>
    const questionText = document.getElementById('question');
    const answersContainer = document.getElementById('answers');
    const nextButton = document.getElementById('next-button');
    const result = document.getElementById('result');

    let questions = [
      {
        question: '10 + 5 equals:',
        answers: [
          { text: '5', correct: false },
          { text: '10', correct: false },
          { text: '20', correct: false },
          { text: '15', correct: true }
        ]
      },
      {
        question: '2 + 2 equals:',
        answers: [
          { text: '3', correct: false },
          { text: '4', correct: true },
          { text: '5', correct: false },
          { text: '6', correct: false }
        ]
      }
    ];

    let randomQuestion;

    nextButton.addEventListener('click', nextQuestion);

    function startGame() {
      nextQuestion();
    }

    function nextQuestion() {
      nextButton.classList.add('hide');
      randomQuestion = questions[Math.floor(Math.random()*questions.length)];
      questionText.textContent = randomQuestion.question;
      randomQuestion.answers.forEach((answer, index) => {
        document.getElementById(`answers-btn-${index + 1}`).textContent = answer.text;
        result.textContent = "";
      });
    }

    function checkAnswer(bntIndex) {
      nextButton.classList.remove('hide');
      // const currentQuestion = 0; // 删除此行
      answer = randomQuestion.answers[bntIndex]; // 使用 randomQuestion
      if(answer.correct === true) {
        incrementPoints();
        result.textContent = "Correct!";
      } else {
        result.textContent = "Incorrect";
      }
    }

    function incrementPoints() {
      // 在这里实现你的积分逻辑
      console.log("Correct answer!");
    }

    startGame();
  </script>
</body>
</html>

登录后复制

注意事项

确保 randomQuestion 在 checkAnswer 函数被调用时已经正确赋值。
incrementPoints 函数需要根据你的游戏逻辑进行实现。
这个例子只是一个基础框架，可以根据需求进行扩展和优化。

总结

通过移除 checkAnswer 函数中错误的 currentQuestion 变量，并使用 randomQuestion 来访问当前问题的答案，可以解决Trivia游戏中答案判断错误的问题。在开发过程中，仔细检查变量的作用域和赋值，可以避免类似错误的发生。调试是软件开发过程中必不可少的一环，善于利用 console.log 等工具可以帮助我们快速定位和解决问题。

以上就是JavaScript Trivia游戏答案判断错误问题排查与修复的详细内容，更多请关注php中文网其它相关文章！