JavaScript开发选择题测验循环失效仅显示最后一题问题求助

问题1解答：为什么只显示最后一道题而非第一道 #

你的for循环会一次性遍历完整的题目数组，每一轮循环都会覆盖题目、选项对应的DOM节点内容，前3道题的渲染结果会被后续循环的赋值直接覆盖，等循环全部执行结束，页面留存的只有最后一轮循环赋值的最后一道题内容。

问题2解答：为什么循环逻辑没有正常生效 #

循环本身执行是正常的，是业务逻辑和触发逻辑不匹配：你需要的是「每次点击切换一道题」，但现有代码是「每次点击就遍历所有题目，直接渲染到最后一道」，自然不会出现逐题递增的效果。

修复代码 #

新增全局变量存储当前题目的索引，每次点击后索引自增再渲染对应题目即可，修改后代码如下：

const questionList = [
  {    
    question: "你叫什么名字?",    
    choices: ["比尔", "鲍勃", "史蒂夫", "乔"],    
    correctAnswer: "bill",
  },
  {    
    question: "她叫什么名字?",    
    choices: ["丹", "丹尼", "丹妮尔", "丹妮拉"],    
    correctAnswer: "daniela"
  },
  {    
    question: "妈妈叫什么名字?",    
    choices: ["多丽丝", "简", "罗丝", "弗兰克"],    
    correctAnswer: "rose"
  },
  {    
    question: "爸爸叫什么名字?",    
    choices: ["伊恩", "安格斯", "杰克", "约翰"],    
    correctAnswer: "ian"
  }
]
// 记录当前展示的题目索引，默认从0（第一道题）开始
let currentQuestionIndex = 0

function callQuestions() {
  // 题目全部展示完后重置回第一题，可根据需求调整为结束提示
  if (currentQuestionIndex >= questionList.length) {
    currentQuestionIndex = 0
    alert('测验已完成，将重新开始')
  }
  const cur = questionList[currentQuestionIndex]
  document.getElementById("quiz-questions").innerHTML = cur.question
  document.getElementById("answerA").innerHTML = cur.choices[0]
  document.getElementById("answerB").innerHTML = cur.choices[1]
  document.getElementById("answerC").innerHTML = cur.choices[2]
  document.getElementById("answerD").innerHTML = cur.choices[3]
  // 索引自增，下次点击加载下一题
  currentQuestionIndex++
}

document.getElementById("select-button").addEventListener("click", callQuestions)
// 页面加载默认渲染第一道题，不需要可以删除
callQuestions()

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