JavaScript问答代码最后一题答案生成按钮失效问题求助

问题现象 #

问答代码运行到最后一题时，「显示下一个答案」按钮可见，但点击后无法生成任何答案段落。

问题根源 #

1. 索引越界：displayQuestion函数末尾的currentQA++会导致索引提前偏移。初始currentQA=0，第一次显示题目后变成1，处理到第三题时currentQA会变成3，而数组qa的最大索引是2，此时qa[currentQA]为undefined，displayNext中访问qa[currentQA].answer.length会静默失败，按钮无响应。
2. 逻辑冗余：displayNext的else分支中错误自增currentQA，进一步加剧索引混乱。

修复方案 #

• 移除displayQuestion函数末尾的currentQA++，仅在点击「切换下一题」按钮时更新索引。
• 增加边界判断，确保数组访问时索引始终有效。

修复后的完整代码 #

var qa = [
  {
    question: "What is HTML?",
    answer: ["HTML ", 
            "Its.",
            "HTd."]
  },
  {
    question: "What is JavaScript?",
    answer: ["JavaSe.", 
            "Its.", 
            "Jav."]
  },
  {
    question: "What is CSS?",
    answer: ["CSS .", 
    "I",
    "C."]
  }
];

// 跟踪当前题目和答案的索引
var currentQA = 0;
var currentAnswer = 0;

// 显示当前题目，初始化答案状态
function displayQuestion() {
  // 边界判断：已完成所有题目
  if (currentQA >= qa.length) {
    alert("Quiz complete!");
    return;
  }
  document.getElementById("question").innerHTML = qa[currentQA].question;
  document.getElementById("answer").innerHTML = "";
  currentAnswer = 0;
  document.getElementById("nextQuestion").style.display = "none";
  document.getElementById("next").style.display = "block";
}

// 显示下一个答案，或切换到下一题状态
function displayNext() {
  if (currentQA >= qa.length) return;
  
  if (currentAnswer < qa[currentQA].answer.length) {
    var answerElement = document.createElement("p");
    answerElement.textContent = qa[currentQA].answer[currentAnswer];
    answerElement.classList.add("answer-paragraph");
    document.getElementById("answer").appendChild(answerElement);
    currentAnswer++;
    // 所有答案展示完毕，切换按钮状态
    if (currentAnswer == qa[currentQA].answer.length) {
      document.getElementById("next").style.display = "none";
      document.getElementById("nextQuestion").style.display = "block";
    }
  } 
}

// 绑定按钮事件
document.getElementById("next").addEventListener("click", displayNext);
document.getElementById("nextQuestion").addEventListener("click", function() {
  currentQA++;
  displayQuestion();
});

// 初始化显示第一题
displayQuestion();

关键修改点 #

1. 将currentQA的自增逻辑移到「切换下一题」的点击事件中，避免索引提前偏移。
2. 在displayQuestion开头增加边界判断，处理所有题目完成的情况。
3. 移除displayNext中多余的索引自增逻辑，确保索引管理清晰。

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