请求为问卷添加左右箭头按键导航功能（附代码）

你提到的e.keycheck是错误的API，这是功能失效的核心原因。正确做法是监听键盘keydown事件，通过e.key判断左/右箭头键，同时补充上一题切换逻辑（原代码仅支持下一题）。

修复后的完整代码 #

JavaScript 部分 #

let currentQuestion = 1;
const totalQuestions = 4;

function answer(answer) {
  // 设置当前题目的选项值
  const input = document.getElementById(`q${currentQuestion}-input`);
  input.value = answer;

  // 隐藏当前题目
  document.getElementById(`question-${currentQuestion}`).style.display = 'none';

  // 切换到下一题或显示提交按钮
  currentQuestion++;
  toggleQuestionDisplay();
}

// 统一控制题目和提交按钮的显示逻辑
function toggleQuestionDisplay() {
  // 隐藏所有题目和提交按钮
  for (let i = 1; i <= totalQuestions; i++) {
    document.getElementById(`question-${i}`).style.display = 'none';
  }
  document.getElementById('submit').style.display = 'none';

  // 根据当前状态显示对应内容
  if (currentQuestion > totalQuestions) {
    document.getElementById('submit').style.display = 'block';
  } else if (currentQuestion >= 1) {
    document.getElementById(`question-${currentQuestion}`).style.display = 'block';
  }
}

// 返回上一题的逻辑
function goToPreviousQuestion() {
  // 边界判断：不能回到第一题之前
  if (currentQuestion <= 1) return;
  currentQuestion--;
  toggleQuestionDisplay();
}

// 监听全局键盘按键事件
document.addEventListener('keydown', function(e) {
  switch(e.key) {
    case 'ArrowRight':
      // 已到最后一题时不执行切换
      if (currentQuestion > totalQuestions) return;
      // 可选：如果要求必须选完选项才能切换，可添加如下判断
      // const currentInput = document.getElementById(`q${currentQuestion}-input`);
      // if (!currentInput.value) return;
      // 默认选中当前题目的第一个选项（可根据需求调整）
      answer(document.querySelector(`#question-${currentQuestion} button`).textContent.toLowerCase());
      break;
    case 'ArrowLeft':
      goToPreviousQuestion();
      break;
  }
});

HTML 部分（保持原代码不变） #

<form method="post">
  <div>
    <label for="name">Your name:</label>
    <input type="text" id="name" name="name">
  </div>

  <div id="question-1">
    <h2>Question 1</h2>
    <p>What is your favorite color?</p>
    <button type="button" onclick="answer('a')">Red</button>
    <button type="button" onclick="answer('b')">Green</button>
    <button type="button" onclick="answer('c')">Blue</button>
    <button type="button" onclick="answer('d')">Yellow</button>
    <input type="hidden" name="q1" id="q1-input">
  </div>

  <div id="question-2" style="display:none;">
    <h2>Question 2</h2>
    <p>What is your favorite food?</p>
    <button type="button" onclick="answer('a')">Pizza</button>
    <button type="button" onclick="answer('b')">Burgers</button>
    <button type="button" onclick="answer('c')">Tacos</button>
    <button type="button" onclick="answer('d')">Sushi</button>
    <input type="hidden" name="q2" id="q2-input">
  </div>

  <div id="question-3" style="display:none;">
    <h2>Question 3</h2>
    <p>What is your birth day?</p>
    <button type="button" onclick="answer('a')">A</button>
    <button type="button" onclick="answer('b')">B</button>
    <button type="button" onclick="answer('c')">C</button>
    <button type="button" onclick="answer('d')">D</button>
    <input type="hidden" name="q3" id="q3-input">
  </div>
  <div id="question-4" style="display:none;">
    <h2>Question 4</h2>
    <p>What is the number of cars in the city?</p>
    <button type="button" onclick="answer('a')">A</button>
    <button type="button" onclick="answer('b')">B</button>
    <button type="button" onclick="answer('c')">C</button>
    <button type="button" onclick="answer('d')">D</button>
    <input type="hidden" name="q4" id="q4-input">
  </div>

  <button id="submit" type="submit" name="submit" style="display:none;">Submit</button>
</form>

关键修复说明 #

1. 修正API错误：用标准的e.key替代不存在的e.keycheck判断按键类型
2. 全局事件绑定：给document添加keydown监听，确保页面任意位置都能捕获按键操作
3. 补充上一题逻辑：新增goToPreviousQuestion函数，添加边界判断防止越界
4. 优化显示逻辑：提取toggleQuestionDisplay函数，统一控制元素显示状态，减少重复代码
5. 可选限制：可添加选项判断，强制用户选完选项才能切换下一题（代码中已注释）

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