如何遍历数组实现点击按钮切换显示下一组答案

我正尝试实现点击按钮时遍历数组，从而在页面上显示下一组答案，感觉已经接近目标但仍有缺失。我尝试使用for循环实现，但未找到正确方法，相关代码如下：

const questions = [
  {
    question: "Commonly used data types DO NOT include:",
    answers: [
      { Text: 'strings', correct: false },
      { Text: 'booleans', correct: false },
      { Text: 'alerts', correct: true },
      { Text: 'numbers', correct: false },
    ]

  },
  {
    question: 'The condition in an if else statement is enclosed within:___',
    answers: [
      { Text: 'parentheses', correct: true },
      { Text: 'curly brackets', correct: false },
      { Text: 'numbers and strings', correct: false },
      { Text: 'square brackets', correct: false },
    ]
  }
let nextQuestionIndex = 0;
let QI = 0

function displayQuestions() {
  resetState();
  let nextQuestions = questions[nextQuestionIndex]
  let questionNumb = nextQuestionindex + 1;
  question.innerHTML = questionNumb + ". " + nextQuestions.question;
  

  nextQuestions.answers.forEach(answer => {
    const button = document.createElement("button");
    button.innerHTML = answer.Text;
    button.classList.add("btn");

    button.addEventListener("click", function() {
      for (var i = 0; i < answer.Text.length; i++) {
       const userChoice = answer.Text[QI[i]];
        button.innerHTML = userChoice;

核心问题分析 #

1. 点击事件内的for循环逻辑错误：你遍历的是答案文本的字符长度，而非题目数组的索引，完全偏离了切换题目的目标。
2. 变量名大小写不一致：nextQuestionindex和定义的nextQuestionIndex拼写不符，会导致报错。
3. questions数组未闭合，存在语法错误。
4. 点击事件的逻辑方向错误：不需要修改当前按钮文本，而是要触发下一题的渲染。

修正后的实现方案 #

直接移除无效循环，改为点击按钮后递增题目索引，重新调用渲染函数即可，同时修复语法问题：

const questions = [
  {
    question: "Commonly used data types DO NOT include:",
    answers: [
      { Text: 'strings', correct: false },
      { Text: 'booleans', correct: false },
      { Text: 'alerts', correct: true },
      { Text: 'numbers', correct: false },
    ]
  },
  {
    question: 'The condition in an if else statement is enclosed within:___',
    answers: [
      { Text: 'parentheses', correct: true },
      { Text: 'curly brackets', correct: false },
      { Text: 'numbers and strings', correct: false },
      { Text: 'square brackets', correct: false },
    ]
  }
]; // 补上数组闭合符号
let nextQuestionIndex = 0;

// 清空页面旧内容的函数
function resetState() {
  const questionEl = document.getElementById('question');
  const answersContainer = document.getElementById('answers-container');
  questionEl.innerHTML = '';
  answersContainer.innerHTML = '';
}

function displayQuestions() {
  resetState();
  const questionEl = document.getElementById('question');
  const answersContainer = document.getElementById('answers-container');

  // 边界判断：所有题目完成后提示
  if (nextQuestionIndex >= questions.length) {
    questionEl.innerHTML = '所有题目已完成！';
    return;
  }

  const currentQ = questions[nextQuestionIndex];
  const qNumber = nextQuestionIndex + 1;
  questionEl.innerHTML = `${qNumber}. ${currentQ.question}`;

  currentQ.answers.forEach(answer => {
    const btn = document.createElement("button");
    btn.innerHTML = answer.Text;
    btn.classList.add("btn");

    btn.addEventListener("click", function() {
      // 点击后切换到下一题
      nextQuestionIndex++;
      displayQuestions();
      // 如需判断答案对错，可在此添加逻辑：
      // if (answer.correct) { alert('答对了！'); }
    });

    answersContainer.appendChild(btn);
  });
}

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

关键说明 #

• resetState()负责清空上一题的内容，避免新旧内容叠加。
• 点击任意答案按钮后，递增nextQuestionIndex并重新调用displayQuestions()，即可渲染下一组题目和答案。
• 添加了边界判断，防止索引越界，所有题目完成后显示提示。

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