4.5.3 真实案例复盘
本节展示 6 个待办清单开发中的典型错误，包括完整的报错信息、诊断过程和修复对话。
案例速查
| 案例 | 错误类型 | 错误信息关键词 |
|---|---|---|
| 案例 1 | TypeError | Cannot read properties of undefined |
| 案例 2 | ReferenceError | is not defined |
| 案例 3 | SyntaxError | Unexpected token |
| 案例 4 | 逻辑错误 | 无报错 |
| 案例 5 | CSS 错误 | 无报错 |
| 案例 6 | 逻辑错误 | 无报错 |
案例 1：任务列表是 undefined
错误现象
点击添加按钮后，任务没有出现。控制台显示红色报错。
控制台报错
Uncaught TypeError: Cannot read properties of undefined (reading 'push')
at addTask (index.html:45:15)
at HTMLButtonElement.<anonymous> (index.html:52:5)问题定位
这个错误的意思是：代码试图对 undefined 调用 push 方法。push 是数组的方法，说明代码期望这是一个数组，但实际上是 undefined。
查看第 45 行代码：
tasks.push({ text: taskText, completed: false });问题出在 tasks 变量上——它没有被正确初始化。
诊断对话
你发送的 Prompt：
我的待办清单代码报错了：
【现象】点击添加按钮后，任务没有出现
【报错】Uncaught TypeError: Cannot read properties of undefined (reading 'push')
at addTask (index.html:45:15)
【代码】
function addTask() {
const input = document.querySelector('.task-input');
const taskText = input.value.trim();
if (taskText) {
tasks.push({ text: taskText, completed: false });
renderTasks();
input.value = '';
}
}
请帮我分析原因。AI 的分析：
这个错误表示
tasks变量在调用push时是undefined。问题原因是tasks没有在使用前初始化为数组。你需要在代码开头声明let tasks = [];。
修复对话
你发送的 Prompt：
请帮我修复。需要：
1. 在代码开头初始化 tasks 变量
2. 给我修复后的完整代码AI 给出的修复代码（关键部分）：
// 在代码开头添加这一行
let tasks = []; // 初始化任务数组
function addTask() {
const input = document.querySelector('.task-input');
const taskText = input.value.trim();
if (taskText) {
tasks.push({ text: taskText, completed: false });
renderTasks();
input.value = '';
}
}验证方法
- 替换代码后刷新页面
- 在输入框输入任务，点击添加
- 确认任务出现在列表中
- 确认控制台没有红色报错
案例 2：函数未定义
错误现象
页面加载后，控制台立即显示报错。
控制台报错
Uncaught ReferenceError: addTask is not defined
at HTMLButtonElement.onclick (index.html:15:42)问题定位
ReferenceError: xxx is not defined 表示代码中使用了一个不存在的变量或函数。
常见原因：
- 函数名拼写错误
- 函数定义在调用之后（代码顺序问题）
- 函数写在了错误的位置
诊断对话
你发送的 Prompt：
页面加载就报错：ReferenceError: addTask is not defined
我的 HTML 中有这样的按钮：
<button onclick="addTask()">添加</button>
我的 JavaScript 中有这个函数：
function addtask() {
// ... 函数内容
}
请帮我分析原因。AI 的分析：
问题在于函数名大小写不一致。HTML 中调用的是
addTask()（T 大写），但 JavaScript 中定义的是addtask()（t 小写）。JavaScript 对大小写敏感，这两个被视为不同的函数。
修复方法
将 JavaScript 中的函数名改为 addTask（与 HTML 中一致）：
// 修改前
function addtask() {
// 修改后
function addTask() {验证方法
- 替换代码后刷新页面
- 确认控制台没有
ReferenceError - 点击添加按钮，确认功能正常
案例 3：localStorage 解析失败
错误现象
页面加载时报错，之前保存的任务无法显示。
控制台报错
Uncaught SyntaxError: Unexpected token 'u', "undefined" is not valid JSON
at JSON.parse (<anonymous>)
at loadTasks (index.html:68:24)问题定位
这个错误发生在 JSON.parse() 时。错误信息 "undefined" is not valid JSON 表示试图解析的内容是字符串 "undefined"，而不是有效的 JSON。
常见原因：
- localStorage 中没有数据时，
getItem返回null - 代码没有处理
null的情况，直接传给了JSON.parse
诊断对话
你发送的 Prompt：
localStorage 读取报错：SyntaxError: Unexpected token 'u', "undefined" is not valid JSON
我的读取代码：
function loadTasks() {
const saved = localStorage.getItem('todoList');
tasks = JSON.parse(saved);
renderTasks();
}
请帮我分析。AI 的分析：
当 localStorage 中没有 'todoList' 这个键时，
getItem返回null。JSON.parse(null)会尝试解析，但在某些情况下可能导致问题。更常见的是，如果之前错误地存储了undefined字符串，就会出现这个错误。你需要在解析前检查数据是否存在。
修复对话
你发送的 Prompt：
请帮我修复 loadTasks 函数，确保：
1. 如果 localStorage 没有数据，使用空数组
2. 如果数据格式不对，也使用空数组
3. 给我完整的修复代码AI 给出的修复代码：
function loadTasks() {
const saved = localStorage.getItem('todoList');
// 检查是否有保存的数据
if (saved && saved !== 'undefined') {
try {
tasks = JSON.parse(saved);
} catch (e) {
// 如果解析失败，使用空数组
console.log('数据格式错误，已重置');
tasks = [];
}
} else {
// 没有保存的数据，使用空数组
tasks = [];
}
renderTasks();
}验证方法
- 替换代码后刷新页面
- 确认控制台没有报错
- 添加几个任务，刷新页面，确认任务还在
案例 4：点击按钮没反应
错误现象
点击添加按钮，没有任何反应。控制台也没有报错。
问题定位
这是典型的「逻辑错误」——代码语法正确，但行为不符合预期。
可能原因：
- 事件监听器没有正确绑定
- 按钮的选择器写错了
- 代码执行顺序问题（在 DOM 加载前就执行了）
诊断对话
你发送的 Prompt：
我的添加按钮点击没反应，控制台也没有报错。
HTML 中的按钮：
<button class="add-btn">添加</button>
JavaScript 中的绑定：
const addBtn = document.querySelector('.add-button');
addBtn.addEventListener('click', addTask);
请帮我排查问题。AI 的分析：
问题在于 CSS 选择器不匹配。你的 HTML 中按钮的 class 是
add-btn，但 JavaScript 中查找的是.add-button。由于找不到元素，addBtn是null，后续的addEventListener调用失败（虽然有时不报错）。
修复方法
统一选择器名称：
// 修改前（选择器不匹配）
const addBtn = document.querySelector('.add-button');
// 修改后（与 HTML 一致）
const addBtn = document.querySelector('.add-btn');验证方法
- 替换代码后刷新页面
- 点击添加按钮，确认功能正常
案例 5：样式突然消失
错误现象
让 AI 添加新功能后，整个页面的样式都消失了，变成了纯文本。
问题定位
这通常发生在 AI 修改代码时，不小心删除或破坏了 CSS 部分。
常见原因：
- AI 只返回了 JavaScript 部分，你替换时覆盖了整个文件
- CSS 代码中出现了语法错误
<style>标签被误删
诊断对话
你发送的 Prompt：
我让你添加删除功能后，页面样式全部消失了。
现在页面只显示纯文本，没有任何样式。
请帮我排查：
1. 检查 <style> 标签是否完整
2. 检查 CSS 语法是否有错误
3. 如果样式丢失，请帮我恢复
这是我现在的完整 HTML 文件：
[粘贴完整代码]AI 的分析：
我发现问题了。在之前的修改中，
<style>标签被误删除了。我会帮你恢复完整的样式代码。
修复方法
让 AI 重新生成包含完整样式的代码，或者从之前的版本中恢复 CSS 部分。
预防措施
- 每次让 AI 修改代码前，先备份当前版本
- 明确告诉 AI：「只修改 JavaScript 部分，不要改动 HTML 和 CSS」
- 收到 AI 的代码后，先检查结构是否完整再替换
案例 6：完成状态无法保存
错误现象
标记任务为「已完成」后，刷新页面，任务恢复为「未完成」状态。
问题定位
这是数据持久化的逻辑错误——完成状态的变更没有触发保存操作。
诊断对话
你发送的 Prompt：
任务的完成状态无法保存。
【复现步骤】
1. 添加一个任务
2. 点击完成按钮，任务显示为已完成
3. 刷新页面
4. 任务恢复为未完成状态
【现象】
添加和删除操作都能保存，但完成状态不行
【相关代码】
function toggleComplete(index) {
tasks[index].completed = !tasks[index].completed;
renderTasks();
}
function saveTasks() {
localStorage.setItem('todoList', JSON.stringify(tasks));
}
请帮我分析原因。AI 的分析：
toggleComplete函数修改了任务状态并重新渲染，但没有调用saveTasks()保存到 localStorage。添加和删除功能能保存，可能是因为它们的函数中调用了saveTasks()，但toggleComplete漏掉了。
修复对话
你发送的 Prompt：
请帮我修复，在 toggleComplete 函数中添加保存操作。AI 给出的修复代码：
function toggleComplete(index) {
tasks[index].completed = !tasks[index].completed;
saveTasks(); // 添加这一行：保存到 localStorage
renderTasks();
}验证方法
- 替换代码后刷新页面
- 添加一个任务
- 点击完成按钮
- 刷新页面
- 确认任务仍然显示为已完成
本节要点
- 每个案例都遵循「现象 → 报错 → 定位 → 修复 → 验证」的流程
- TypeError 通常是变量未定义或类型不对
- ReferenceError 通常是拼写错误或作用域问题
- SyntaxError 在 JSON.parse 时常见于数据为空或格式错误
- 逻辑错误没有报错信息，需要对比「期望行为」和「实际行为」
- 样式错误要检查 CSS 代码是否完整
掌握了这些案例，你就能应对待办清单开发中的大部分问题。