点击按钮切换下一题功能故障求助（附现有JS代码）

你的代码核心问题是点击下一题按钮时只递增了索引，但没有重新渲染题目，另外还有几个细节问题导致功能异常，以下是修复方案：

问题分析与修改点 #

• 点击nextBtn后仅递增currentQuestionIndex，未调用displayQuestion()更新页面内容
• displayQuestion()每次调用会向选项容器追加新元素，旧选项未清除，导致选项叠加
• nextBtn的获取位置错误，应在全局作用域提前获取，避免每次调用checkAnswer都重新查询DOM
• 未处理索引越界问题，当到达最后一题时应禁用按钮或提示答题结束

修复后的完整代码 #

const Questions = [
  {
    question: "太阳系中体积最大的行星是哪一颗？",
    options: ["火星", "金星", "木星", "海王星"],
    correctAnswer: "木星",
  },
  {
    question: "元素周期表中符号'Fe'代表哪种元素？",
    options: ["铁", "磷", "铜", "银"],
    correctAnswer: "铁",
  },
  {
    question: "谁创作了名画《蒙娜丽莎》？",
    options: ["文森特·梵高", "巴勃罗·毕加索", "列奥纳多·达·芬奇", "米开朗基罗"],
    correctAnswer: "列奥纳多·达·芬奇",
  },
  {
    question: "哪颗行星有时被称为'晨星'？",
    options: ["火星", "金星", "木星", "天王星"],
    correctAnswer: "金星",
  },
  {
    question: "哪位英国作家创作了《罗密欧与朱丽叶》和《哈姆雷特》？",
    options: ["查尔斯·狄更斯", "简·奥斯汀", "威廉·莎士比亚", "马克·吐温"],
    correctAnswer: "威廉·莎士比亚",
  },
  {
    question: "哪颗行星被称为'红色星球'？",
    options: ["火星", "金星", "木星", "海王星"],
    correctAnswer: "火星",
  },
  {
    question: "土耳其共和国正式宣布成立的日期是？",
    options: ["1923年10月29日", "2016年7月15日", "1919年5月19日", "1920年4月23日"],
    correctAnswer: "1923年10月29日",
  },
  {
    question: "地球大气的主要成分是哪种元素？",
    options: ["氧气", "氢气", "氮气", "二氧化碳"],
    correctAnswer: "氮气",
  },
  {
    question: "地球上最大的哺乳动物是什么？",
    options: ["大象", "蓝鲸", "长颈鹿", "狮子"],
    correctAnswer: "蓝鲸",
  },
  {
    question: "哪位科学家提出了公式'E=mc²'？",
    options: ["艾萨克·牛顿", "伽利略·伽利雷", "阿尔伯特·爱因斯坦", "尼古拉·特斯拉"],
    correctAnswer: "阿尔伯特·爱因斯坦",
  },
];

let currentQuestionIndex = 0;
let score = 0;

// 提前获取DOM元素，避免重复查询
const questionTitle = document.querySelector(".title");
const answerContainer = document.querySelector(".options");
const nextBtn = document.querySelector(".next");

displayQuestion();

function displayQuestion() {
  // 先清空旧的选项内容
  answerContainer.innerHTML = "";
  
  const currentQuestion = Questions[currentQuestionIndex];
  questionTitle.innerHTML = currentQuestion.question;

  // 生成新选项
  currentQuestion.options.forEach((option) => {
    const answer = document.createElement("div");
    answer.innerText = option;
    answer.classList.add("answer");
    answerContainer.appendChild(answer);

    answer.addEventListener("click", function () {
      checkAnswer(option);
    });
  });
  
  // 根据索引状态控制按钮显示
  if (currentQuestionIndex === Questions.length - 1) {
    nextBtn.innerText = "查看得分";
  } else {
    nextBtn.innerText = "下一题";
  }
  // 默认隐藏按钮，选择选项后再显示
  nextBtn.classList.remove("open");
}

nextBtn.addEventListener("click", () => {
  currentQuestionIndex++;
  // 判断是否到达最后一题
  if (currentQuestionIndex >= Questions.length) {
    alert(`答题结束！你的得分是：${score}/${Questions.length}`);
    // 可重置答题状态
    currentQuestionIndex = 0;
    score = 0;
  }
  displayQuestion();
});

function checkAnswer(selectedOption) {
  const currentQuestion = Questions[currentQuestionIndex];

  if (selectedOption === currentQuestion.correctAnswer) {
    score++;
  }

  nextBtn.classList.add("open");
}

关键修改说明 #

1. 全局获取DOM元素：提前获取questionTitle、answerContainer、nextBtn，减少DOM查询次数
2. 清空旧选项：在displayQuestion()开头用answerContainer.innerHTML = ""清除之前的选项，避免叠加
3. 点击按钮后调用displayQuestion()：在nextBtn的点击事件中，递增索引后立即调用渲染函数更新页面
4. 边界处理：当到达最后一题时，修改按钮文本为"查看得分"，点击后显示总分并可重置答题
5. 按钮状态控制：默认隐藏下一题按钮，选择选项后再显示，避免未答题就跳转

内容的提问来源于stack exchange，提问作者Ömer Toyga