青训营学习记录笔记
如何使用JavaScript实现特定功能（以待办事项为例）
在本次实践笔记中，实现了一个关于如何使用JavaScript实现一个简单的待办事项列表的项目实例，并分析演示了如何使用JavaScript解决特定问题。
项目实例：待办事项列表
01 项目简介
待办事项列表是一个常见的功能，用于记录和管理用户的待办任务。在这个项目中，我们将使用JavaScript来实现一个简单的待办事项列表，用户可以添加、编辑和删除任务。
02 HTML 结构
首先，我们需要创建一个基本的HTML结构来容纳待办事项列表。在HTML文件中，添加一个包含输入框、添加按钮和任务列表的容器。
<!DOCTYPE html>
<html>
<head>
<title>待办事项列表</title>
</head>
<body>
<h1>待办事项列表</h1>
<input type="text" id="taskInput" placeholder="请输入任务">
<button id="addButton">添加</button>
<ul id="taskList"></ul>
<script src="main.js"></script>
</body>
</html>
03 JavaScript 实现
接下来，我们将使用JavaScript来实现待办事项列表的功能。在 main.js 文件中，我们将实现以下功能：
- 获取输入框和添加按钮的引用
- 添加点击事件监听器，当用户点击添加按钮时执行函数
- 在函数中，获取输入框的值，并将其添加到任务列表中
- 创建一个函数来渲染任务列表，将任务添加到HTML中
- 创建一个函数来删除任务
- 创建一个函数来编辑任务
// 获取元素引用
const taskInput = document.getElementById('taskInput');
const addButton = document.getElementById('addButton');
const taskList = document.getElementById('taskList');
// 添加点击事件监听器
addButton.addEventListener('click', addTask);
// 添加任务
function addTask() {
const task = taskInput.value;
// 确保任务不为空
if (task !== '') {
// 渲染任务列表
renderTask(task);
// 清空输入框
taskInput.value = '';
}
}
// 渲染任务列表
function renderTask(task) {
const li = document.createElement('li');
li.textContent = task;
// 创建删除按钮
const deleteButton = document.createElement('button');
deleteButton.textContent = '删除';
// 添加删除按钮的点击事件监听器
deleteButton.addEventListener('click', deleteTask);
// 将任务和删除按钮添加到任务列表中
li.appendChild(deleteButton);
taskList.appendChild(li);
}
// 删除任务
function deleteTask(event) {
const taskItem = event.target.parentElement;
taskList.removeChild(taskItem);
}
// 编辑任务
function editTask(event) {
const taskItem = event.target.parentElement;
const taskText = taskItem.firstChild.textContent;
// 将任务文本添加回输入框
taskInput.value = taskText;
// 删除任务
deleteTask(event);
}
04 功能实现
在此JavaScript实践案例中可以运行这个项目并实现添加、编辑和删除任务。当点击添加按钮时，输入框中的任务将被添加到任务列表中。当你点击删除按钮时，对应的任务将从列表中删除。另外还可以编辑任务，将任务文本添加回输入框进行修改。
