学校项目：城市猜谜Quiz游戏报错Uncaught ReferenceError及功能异常

核心错误解析：Uncaught ReferenceError: question is not defined #

这个错误直接导致代码中断执行，是选项无法展示的根本原因——你的代码里用到了question变量，但它从未被声明或初始化。常见触发场景：

• 未用let/const/var声明question就直接使用
• 变量名拼写错误（比如写成queston或questions）
• question是某个函数的局部变量，你在函数外部尝试访问它

分步修复指南 #

1. 正确定义题目数据与question变量 #

首先要确保有完整的题目数据数组，再初始化question变量：

// 定义题目数据（根据你的需求修改内容）
const quizQuestions = [
  {
    imageUrl: 'beijing.jpg',
    options: ['北京', '上海', '深圳'],
    correctAnswer: '北京'
  },
  {
    imageUrl: 'tokyo.jpg',
    options: ['东京', '首尔', '曼谷'],
    correctAnswer: '东京'
  }
];

// 初始化全局/可访问的变量
let currentQuestionIndex = 0;
let question = quizQuestions[currentQuestionIndex]; // 关键：这里定义question，确保后续代码能访问
let score = 0;

2. 修复选项渲染代码 #

依赖question生成选项的代码必须在question定义之后执行，示例如下：

// 获取页面上的选项容器（假设你的HTML里有id为options-container的元素）
const optionsContainer = document.getElementById('options-container');

// 渲染当前题目的选项
function renderOptions() {
  optionsContainer.innerHTML = ''; // 清空旧选项
  // 遍历当前题目的选项，生成按钮
  question.options.forEach(option => {
    const optionBtn = document.createElement('button');
    optionBtn.textContent = option;
    optionBtn.addEventListener('click', () => checkAnswer(option));
    optionsContainer.appendChild(optionBtn);
  });
}

3. 修正变量作用域问题 #

如果question是在函数内部定义的，要确保它能被其他函数访问：

// 错误示例：question是函数内的局部变量，外部无法访问
function startGame() {
  const question = quizQuestions[0];
}
startGame();
renderOptions(); // 这里会报错，因为renderOptions里的question未定义

// 正确示例：将question声明在函数外部，函数内仅更新它
let question;
function startGame() {
  currentQuestionIndex = 0;
  score = 0;
  question = quizQuestions[currentQuestionIndex];
  renderOptions();
  renderImage(); // 渲染城市图片的函数
}

4. 调试小技巧 #

作为初学者，可以用console.log快速定位问题：

// 在使用question前打印，确认它是否存在
console.log('当前题目:', question);
// 打印题目数组，确认数据是否正确加载
console.log('所有题目:', quizQuestions);

完整功能补全提示 #

• 切换题目：答对/答错后，更新currentQuestionIndex，重新赋值question = quizQuestions[currentQuestionIndex]，再调用renderOptions()和renderImage()
• 显示分数：所有题目完成后（currentQuestionIndex >= quizQuestions.length），用DOM操作把score显示在页面上
• 重玩功能：给重玩按钮绑定点击事件，调用startGame()重置游戏状态

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