---
title: "4.3.1 功能一：添加任务"
order: 2
---


![04-practice-0-to-1_4.3-core-features_4.3.1-add-task.png](/images/Basic/04-practice-0-to-1_4.3-core-features_4.3.1-add-task.png)
# 4.3.1 功能一：添加任务

> **本步目标**：让用户能够输入任务内容，点击按钮后任务出现在列表中

这是待办清单最核心的功能——没有它，其他功能都没有意义。

## 🎯 我们要实现什么

用户的操作流程：

1. 在输入框中输入任务内容（比如"买牛奶"）
2. 点击"添加"按钮
3. "买牛奶"出现在下方的任务列表中
4. 输入框自动清空，方便输入下一个任务

## 📝 完整 Prompt

复制下面的 Prompt，发送给你的 AI IDE：

```
【背景】
我已经有一个待办清单的静态页面（HTML + CSS）。
页面包含：标题、输入框、添加按钮、任务列表区域。
现在需要添加 JavaScript 让它能真正工作。

【当前任务】
请实现"添加任务"功能：
1. 用户在输入框输入内容后，点击"添加"按钮
2. 输入的内容作为新任务，显示在任务列表中
3. 每个任务显示：任务内容 + "完成"按钮 + "删除"按钮
4. 添加成功后，输入框自动清空
5. 如果输入框为空，点击添加按钮不应该添加空任务

【技术要求】
- 使用原生 JavaScript，不使用任何框架
- 把 JavaScript 代码写在 HTML 文件底部的 <script> 标签内
- 关键逻辑添加中文注释，帮助我理解代码

【我是初学者】
请保持代码简单易懂，变量命名要有描述性。
```

## ✅ 预期结果

发送 Prompt 后，AI 会给你更新后的代码。替换你的 HTML 文件内容后，你应该看到：

**测试步骤**：
1. 在输入框输入"买牛奶"
2. 点击"添加"按钮
3. 检查结果：

| 检查项 | 预期效果 |
|-------|---------|
| 任务列表 | 出现"买牛奶"这个任务 |
| 输入框 | 变成空的 |
| 按钮 | 每个任务旁边有"完成"和"删除"按钮 |

**再测试一次**：
1. 输入框保持空白，直接点击"添加"
2. 预期：不应该添加任何任务

## 🔍 检查点

在继续之前，确认以下几点：

- [ ] 输入内容后点击添加，任务出现在列表中
- [ ] 添加后输入框会清空
- [ ] 空输入不会添加空任务
- [ ] 可以连续添加多个任务
- [ ] 页面没有报错（按 F12 打开控制台检查）

## ⚠️ 常见问题排查

### 问题 1：点击按钮没有任何反应

**可能原因**：JavaScript 代码没有正确加载，或者按钮没有绑定事件。

**排查步骤**：
1. 按 F12 打开浏览器开发者工具
2. 查看"控制台"（Console）标签页
3. 如果有红色报错信息，复制给 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 会帮你写对应的代码**。

## 🎯 完成确认

如果你已经：
- ✅ 能成功添加新任务
- ✅ 添加后输入框会清空
- ✅ 空输入不会添加任务

恭喜！"添加"功能已经完成。

接下来，我们让"删除"按钮也能工作。

→ [4.3.2 功能二：删除任务](./4.3.2-delete-task.md)