JavaScript星球测验项目：正确/错误提示未显示及变量未定义问题求助

问题根源 #

1. 变量作用域错误：你在displayQuestion函数内定义的question是局部变量，无法在函数外部的点击回调中访问，导致if (index == question.correctAnswer)报错question未定义。
2. 重复绑定事件：你给每个图片元素绑定了两次点击事件，点击时会触发两次逻辑，造成newQuestion异常递增、结果提示与页面跳转冲突的问题。

修复方案 #

合并所有点击逻辑到同一个事件回调中，直接通过全局的newQuestion索引获取当前题目，避免作用域问题。

修复后的完整JavaScript代码 #

// Splanets Quiz Questions, answers options, correct answer and image links 
let answer1 = document.getElementById("img1");
let answer2 = document.getElementById("img2");
let answer3 = document.getElementById("img3");
let answer4 = document.getElementById("img4");

let answerImages = [answer1, answer2, answer3, answer4];

let spQuiz = [
    {
        question: "What planet is closest to the Sun?",
        answers: [
            "assets/img/venus.png",
            "assets/img/mercury.png",
            "assets/img/mars.png",
            "assets/img/earth.png"
        ],
            correctAnswer: '1'
    },
    {
        question: "Which planet has the highest mountain in our solar system, a volcano named Olympus Mons?",
        answers: [
            "assets/img/mars.png",
            "assets/img/jupiter.png",
            "assets/img/neptune.png",
            "assets/img/earth.png"
        ],
        correctAnswer: '0'
    },
    {
        question: "Which planet has organic life?",
        answers: [
            "assets/img/saturn.png",
            "assets/img/mars.png",
            "assets/img/earth.png",
            "assets/img/uranus.png"
        ],
        correctAnswer: '2'
    },
    {
        question: "Which planet is the brightest in our solar system?",
        answers: [
            "assets/img/mars.png",
            "assets/img/neptune.png",
            "assets/img/saturn.png",
            "assets/img/venus.png"
        ],
        correctAnswer: '3'
    },
    {
        question: "Which planet is Nicknamed the Icy planet as it is the coldest one?",
        answers: [
            "assets/img/neptune.png",
            "assets/img/saturn.png",
            "assets/img/uranus.png",
            "assets/img/mars.png"
        ],
        correctAnswer: '2'
    },
    {
        question: "Which planet is 5th from the sun and the biggest in our solar system?",
        answers: [
            "assets/img/saturn.png",
            "assets/img/mars.png",
            "assets/img/mercury.png",
            "assets/img/jupiter.png"
        ],
        correctAnswer: '3'
    },
    {
        question: "Which planet is the smallest planet?",
        answers: [
            "assets/img/mercury.png",
            "assets/img/earth.png",
            "assets/img/neptune.png",
            "assets/img/jupiter.png"
        ],
        correctAnswer: '0'
    },
    {
        question: "Which planet has outer rings made of dust and ice chunks?",
        answers: [
            "assets/img/venus.png",
            "assets/img/saturn.png",
            "assets/img/uranus.png",
            "assets/img/jupiter.png"
        ],
        correctAnswer: '1'
    },
    {
        question: "Which planet is the hottest planet?",
        answers: [
            "assets/img/mercury.png",
            "assets/img/mars.png",
            "assets/img/venus.png",
            "assets/img/jupiter.png"
        ],
        correctAnswer: '2'
    },
    {
        question: "Which planet is furthest from the sun?",
        answers: [
            "assets/img/neptune.png",
            "assets/img/saturn.png",
            "assets/img/uranus.png",
            "assets/img/mercury.png"
        ],
        correctAnswer: '0'
    },
];

// Function to show Question and possible answers
let newQuestion = 0;
const result = document.getElementById("result");
let score = 0;

function displayQuestion () {
    const currentQuestion = spQuiz[newQuestion];
    document.getElementById("question-text").innerHTML = currentQuestion.question;
    const answers = currentQuestion.answers;
    answer1.setAttribute("src", answers[0]);
    answer2.setAttribute("src", answers[1]);
    answer3.setAttribute("src", answers[2]);
    answer4.setAttribute("src", answers[3]);
    // 清空上一题的结果提示
    result.innerHTML = "";
}

// 合并所有点击逻辑到同一个事件监听
for (let i = 0; i < answerImages.length; i++) {
  answerImages[i].addEventListener("click", function() {
    const currentQuestion = spQuiz[newQuestion];
    // 显示正确/错误提示
    if (String(i) === currentQuestion.correctAnswer) {
      result.innerHTML = "Correct";
      score++;
    } else {
      result.innerHTML = "Incorrect";
    }

    // 延迟切换题目，让用户看到结果提示
    setTimeout(() => {
      newQuestion++;
      if (newQuestion < spQuiz.length) {
        displayQuestion();
      } else {
        document.querySelector("#score").innerHTML = "Your final score is " + score + " out of 10";
        if (score <= 9) {
          setTimeout(function() {
            window.location.href = "tryagain.html";
          }, 2000);
        } else {
          setTimeout(function() {
            window.location.href = "rocketlaunch.html";
          }, 2000);
        }
      }
    }, 1000); // 1秒延迟，给用户时间查看结果
  });
}

//Call Quiz
displayQuestion();

关键修改说明 #

1. 移除重复事件绑定：删掉了原来的answerImages.forEach事件监听，把结果提示逻辑合并到分数计算的同一个点击回调中，避免重复触发。
2. 解决作用域问题：在点击回调中通过spQuiz[newQuestion]获取当前题目，代替原来未定义的question变量。
3. 增加延迟切换题目：添加1秒延迟后再切换题目，让用户能看到正确/错误的提示信息，提升体验。
4. 清空结果提示：每次加载新题目时清空result元素内容，避免上一题的结果残留。

内容的提问来源于stack exchange，提问作者Pellis