4.3.1 功能一：添加任务
本步目标：让用户能够输入任务内容，点击按钮后任务出现在列表中
这是待办清单最核心的功能——没有它，其他功能都没有意义。
🎯 我们要实现什么
用户的操作流程：
- 在输入框中输入任务内容（比如"买牛奶"）
- 点击"添加"按钮
- "买牛奶"出现在下方的任务列表中
- 输入框自动清空，方便输入下一个任务
📝 完整 Prompt
复制下面的 Prompt，发送给你的 AI IDE：
【背景】
我已经有一个待办清单的静态页面（HTML + CSS）。
页面包含：标题、输入框、添加按钮、任务列表区域。
现在需要添加 JavaScript 让它能真正工作。
【当前任务】
请实现"添加任务"功能：
1. 用户在输入框输入内容后，点击"添加"按钮
2. 输入的内容作为新任务，显示在任务列表中
3. 每个任务显示：任务内容 + "完成"按钮 + "删除"按钮
4. 添加成功后，输入框自动清空
5. 如果输入框为空，点击添加按钮不应该添加空任务
【技术要求】
- 使用原生 JavaScript，不使用任何框架
- 把 JavaScript 代码写在 HTML 文件底部的 <script> 标签内
- 关键逻辑添加中文注释，帮助我理解代码
【我是初学者】
请保持代码简单易懂，变量命名要有描述性。✅ 预期结果
发送 Prompt 后，AI 会给你更新后的代码。替换你的 HTML 文件内容后，你应该看到：
测试步骤：
- 在输入框输入"买牛奶"
- 点击"添加"按钮
- 检查结果：
| 检查项 | 预期效果 |
|---|---|
| 任务列表 | 出现"买牛奶"这个任务 |
| 输入框 | 变成空的 |
| 按钮 | 每个任务旁边有"完成"和"删除"按钮 |
再测试一次：
- 输入框保持空白，直接点击"添加"
- 预期：不应该添加任何任务
🔍 检查点
在继续之前，确认以下几点：
- [ ] 输入内容后点击添加，任务出现在列表中
- [ ] 添加后输入框会清空
- [ ] 空输入不会添加空任务
- [ ] 可以连续添加多个任务
- [ ] 页面没有报错（按 F12 打开控制台检查）
⚠️ 常见问题排查
问题 1：点击按钮没有任何反应
可能原因：JavaScript 代码没有正确加载，或者按钮没有绑定事件。
排查步骤：
- 按 F12 打开浏览器开发者工具
- 查看"控制台"（Console）标签页
- 如果有红色报错信息，复制给 AI
修复 Prompt：
点击添加按钮没有反应。
控制台报错信息：[粘贴你看到的红色文字]
请帮我修复这个问题。问题 2：任务添加了但看不到
可能原因：任务被添加到了错误的位置，或者样式有问题。
修复 Prompt：
我点击添加后，输入框清空了（说明代码执行了），
但是任务列表里看不到新任务。
请检查代码，确保新任务能正确显示在任务列表区域。问题 3：输入框没有清空
修复 Prompt：
添加任务功能可以用了，任务能显示。
但有个问题：添加成功后，输入框里的文字没有清空。
请修复这个问题。问题 4：空输入也能添加
修复 Prompt：
现在输入框为空时，点击添加按钮也会添加一个空的任务项。
请添加验证：如果输入框为空或只有空格，不执行添加操作。💡 技术小贴士：理解事件处理
你可能好奇 AI 写的代码是怎么工作的。这里用一个生活类比帮你理解：
场景：你在奶茶店等取餐
| 奶茶店场景 | 对应的代码概念 |
|---|---|
| 叫号屏幕 | 按钮元素 |
| "您的订单好了" | 点击事件（click） |
| 你听到叫号去取餐 | 事件监听器（addEventListener） |
| 拿走奶茶 | 事件处理函数（执行的代码） |
AI 生成的代码大概是这个结构：
javascript
// 1. 找到按钮（就像知道叫号屏在哪）
const addButton = document.querySelector('.add-btn');
// 2. 告诉按钮：有人点你的时候，执行这个任务
addButton.addEventListener('click', function() {
// 3. 这里是点击后要做的事情
// - 获取输入框的内容
// - 创建新的任务元素
// - 把任务添加到列表
// - 清空输入框
});你不需要记住这些代码。只需要知道：告诉 AI 你想要什么效果，AI 会帮你写对应的代码。
🎯 完成确认
如果你已经：
- ✅ 能成功添加新任务
- ✅ 添加后输入框会清空
- ✅ 空输入不会添加任务
恭喜！"添加"功能已经完成。
接下来，我们让"删除"按钮也能工作。