如何为答题页面实现返回按钮？附现有JavaScript代码及HTML结构

首先我先梳理下你现有代码的逻辑：currAnswer 是下一个要显示的题目索引（初始值应该为0），每次点击Next按钮会隐藏当前可见的题目，显示 answers[currAnswer] 后索引加1；当索引到7时，按钮切换为提交状态。基于这个逻辑，我们可以一步步实现返回按钮：

1. 添加返回按钮的HTML元素 #

在页面中与Next按钮同级的位置，添加返回按钮并设置初始隐藏状态（第一题不需要返回）：

<button id="prevButton" class="prev_button" hidden>Back</button>
<button id="nextButton">Next</button>

2. 在JS中获取按钮并绑定点击事件 #

在现有JS代码中，添加返回按钮的获取和事件绑定逻辑：

// 获取返回按钮元素
const prevButton = document.getElementById('prevButton');

// 为返回按钮绑定点击事件
prevButton.addEventListener('click', () => prevAnswer());

3. 实现返回逻辑函数 prevAnswer #

这个函数需要处理隐藏当前题目、切换到上一题、更新按钮状态这几个核心操作：

const prevAnswer = () => {
  // 边界判断：如果当前是第一题（currAnswer <=1），不执行返回操作
  if (currAnswer <= 1) return;

  // 隐藏当前正在显示的题目（当前显示的是currAnswer-1索引的元素）
  answers[currAnswer - 1].classList.add('hidden');
  
  // 索引减1，指向要显示的上一题位置
  currAnswer--;
  
  // 显示上一题
  answers[currAnswer - 1].classList.remove('hidden');

  // 如果之前Next按钮已切换为"Send"，现在恢复为"Next"并还原类名
  if (currAnswer < 7) {
    nextButton.innerHTML = "Next";
    nextButton.className = "next_button"; // 替换为你原来Next按钮的类名
  }

  // 更新返回按钮显示状态：回到第一题时隐藏按钮
  prevButton.hidden = currAnswer <= 1;
}

4. 优化Next按钮逻辑，同步更新返回按钮状态 #

修改你现有的 nextAnswer 函数，每次点击Next后自动控制返回按钮的显示/隐藏：

const nextAnswer = () => {
  // 优化：无需遍历所有元素，仅隐藏当前可见的题目
  const currentVisible = document.querySelector('.answer:not(.hidden)');
  if (currentVisible) {
    currentVisible.classList.add('hidden');
  }

  answers[currAnswer].classList.remove('hidden');
  currAnswer++;

  // 添加：控制返回按钮的显示状态
  prevButton.hidden = currAnswer <= 1;

  if (currAnswer == 7) {
    nextButton.innerHTML = "Send";
    nextButton.className = "submit_button";
  }
}

5. 确保 currAnswer 的作用域正确 #

要保证 currAnswer 变量能被 nextAnswer 和 prevAnswer 共同访问，需要将其声明在全局作用域或两个函数共享的作用域中：

// 放在所有函数外部，初始值设为0
let currAnswer = 0;

这样返回按钮就能正常工作了：切换到第二题及以后时，返回按钮自动显示；点击返回会回到上一题，若之前已到最后一题（按钮显示Send），返回后会变回Next按钮；回到第一题时，返回按钮自动隐藏。

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