制作一个简易的待办事项应用 | 豆包MarsCode AI刷题实践是学习 JavaScript 最好的方法，而一个待办

实践是学习 JavaScript 最好的方法，而一个待办事项应用（To-Do List）正是适合初学者的经典项目。通过这个项目，我们将了解如何使用 JavaScript 实现动态功能，包括 DOM 操作、事件监听和数据处理。

项目需求分析

一个待办事项应用主要有以下功能：

任务添加：用户输入内容后点击按钮，任务会实时显示在页面中。
任务删除：每个任务旁都有删除按钮，点击后任务从页面移除。
任务完成标记：用户可以点击任务内容，切换完成与未完成状态（如划线表示完成）。

设计思路：

简单易用：界面尽量直观，核心功能明确，不引入复杂逻辑。
实时反馈：每次用户操作后，页面即时更新任务列表。
扩展性强：为后续功能添加（如任务优先级）留出余地。

实现过程：从思路到代码

1. HTML 结构分析

为了实现功能，页面结构应该包括：

输入框：供用户输入任务内容。
按钮：触发任务添加操作。
任务列表：显示已添加的任务，包含任务内容和操作按钮。

以下是我们的 HTML 框架：

html
复制代码
<input type="text" id="taskInput" placeholder="输入任务内容">
<button id="addTaskBtn">添加任务</button>
<ul id="taskList"></ul>

2. 任务添加功能

当用户点击“添加任务”按钮时，我们需要将输入框的内容添加到任务列表中。如果输入框为空，则提示用户输入内容。

代码实现如下：

javascript
复制代码
document.getElementById('addTaskBtn').addEventListener('click', function() {
    const taskInput = document.getElementById('taskInput');
    const taskText = taskInput.value.trim(); // 清除首尾空格
    if (!taskText) {
        alert('请输入任务内容！');
        return;
    }

    const taskItem = document.createElement('li');
    taskItem.textContent = taskText;
    taskItem.className = 'task';
    document.getElementById('taskList').appendChild(taskItem);

    taskInput.value = ''; // 清空输入框
});

实现分析：

trim() 的使用：防止用户输入空格。
动态生成任务项：通过 document.createElement 创建新元素，并将其添加到页面。
用户体验优化：任务添加后清空输入框，方便继续输入。

3. 任务删除功能

每个任务旁添加一个删除按钮，点击后可移除该任务。

删除功能的核心是为按钮绑定点击事件。为避免重复绑定，我们使用事件委托。

javascript
复制代码
document.getElementById('taskList').addEventListener('click', function(event) {
    if (event.target.tagName === 'BUTTON') {
        event.target.parentElement.remove();
    }
});

分析：

事件委托的优势：只需绑定一次事件，动态生成的任务也能响应操作。
remove() 方法：快速移除目标元素，避免复杂操作。

4. 任务完成标记

点击任务内容可切换任务状态，例如完成任务显示划线，未完成时恢复正常。

javascript
复制代码
document.getElementById('taskList').addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        event.target.classList.toggle('completed');
    }
});

功能设计思路：

类的切换：使用 classList.toggle 方法方便地切换任务状态。
用户体验优化：直接点击任务内容，操作直观简洁。

完成后的效果展示

最终完成的待办事项应用，可以在添加任务、删除任务和标记完成方面流畅运行。同时，代码简洁，逻辑清晰，非常适合初学者学习。

代码总结

完整代码如下：

javascript
复制代码
document.getElementById('addTaskBtn').addEventListener('click', function() {
    const taskInput = document.getElementById('taskInput');
    const taskText = taskInput.value.trim();
    if (!taskText) {
        alert('请输入任务内容！');
        return;
    }

    const taskItem = document.createElement('li');
    taskItem.innerHTML = `
        <span>${taskText}</span>
        <button>删除</button>
    `;
    document.getElementById('taskList').appendChild(taskItem);
    taskInput.value = '';
});

document.getElementById('taskList').addEventListener('click', function(event) {
    if (event.target.tagName === 'BUTTON') {
        event.target.parentElement.remove();
    } else if (event.target.tagName === 'SPAN') {
        event.target.classList.toggle('completed');
    }
});

反思与改进方向

在这个项目中，我们学习了如何用 JavaScript 操作 DOM 并动态更新页面，但仍有许多改进空间：

持久化任务数据：可以用 localStorage 保存任务列表，让用户刷新页面后数据不丢失。
任务排序功能：用户可能希望按照优先级或完成状态对任务进行排序。
样式优化：当前页面设计较为基础，可以通过 CSS 美化界面，提升用户体验。

最后的一点思考

开发过程不仅是对技术的锻炼，也是对问题解决能力的考验。通过拆解功能需求并逐步实现，我们不仅完成了项目，还锻炼了分析和设计能力