青训营笔记四：使用JavaScript实现交互式待办事项列表

JavaScript是一种强大的脚本语言，广泛应用于Web开发中。本文将通过一个完整的项目实例，演示如何使用JavaScript来实现一个交互式的待办事项列表。我们将从头开始构建这个项目，展示如何解决问题并逐步完善功能，从而展示JavaScript在实际应用中的优势与魅力。

项目概述：

待办事项列表是一种常见的应用，用于帮助人们组织、追踪和管理任务。我们的目标是通过JavaScript创建一个交互式的待办事项列表，用户可以添加、编辑、标记完成和删除任务。

项目步骤：

1、搭建基本HTML结构

首先，我们创建一个简单的HTML结构，包含一个输入框用于添加新任务，以及一个用于显示任务的列表。同时，为了方便CSS样式的引用，我们连接一个外部CSS文件。

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <title>交互式待办事项列表</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>我的待办事项</h1>
  <input type="text" id="taskInput" placeholder="添加新任务...">
  <ul id="taskList"></ul>
  <script src="script.js"></script>
</body>
</html>

2、添加JavaScript功能

在这一步中，我们将使用JavaScript来实现任务的添加、显示、编辑、完成标记和删除功能。我们首先创建一个名为script.js的文件，并在其中添加以下代码：

javascript 复制代码

// 获取输入框和任务列表的引用
const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');

// 监听输入框按下回车键事件
taskInput.addEventListener('keypress', function (event) {
  if (event.key === 'Enter' && taskInput.value.trim() !== '') {
    addTask(taskInput.value);
    taskInput.value = '';
  }
});

// 添加新任务
function addTask(taskText) {
  const li = document.createElement('li');
  const span = document.createElement('span');
  const editButton = document.createElement('button');
  const deleteButton = document.createElement('button');

  span.textContent = taskText;
  editButton.textContent = '编辑';
  deleteButton.textContent = '删除';

  editButton.addEventListener('click', function () {
    editTask(li, span);
  });

  deleteButton.addEventListener('click', function () {
    deleteTask(li);
  });

  li.appendChild(span);
  li.appendChild(editButton);
  li.appendChild(deleteButton);

  taskList.appendChild(li);
}

// 编辑任务
function editTask(taskElement, taskSpan) {
  const newTaskText = prompt('编辑任务', taskSpan.textContent);
  if (newTaskText !== null && newTaskText.trim() !== '') {
    taskSpan.textContent = newTaskText;
  }
}

// 删除任务
function deleteTask(taskElement) {
  taskElement.remove();
}

3、完善功能

现在，我们的待办事项列表已经能够添加任务、编辑任务和删除任务。但是，为了更好的用户体验，我们还可以增加标记完成的功能。

首先，在HTML文件中添加一个用于标记完成的按钮：

html 复制代码

<button>完成</button>

然后，在script.js中修改addTask函数：

javascript 复制代码

function addTask(taskText) {
  // ...
  const completeButton = document.createElement('button');
  completeButton.textContent = '完成';

  completeButton.addEventListener('click', function () {
    taskElement.classList.toggle('completed');
  });

  li.appendChild(completeButton);
  taskList.appendChild(li);
}

最后，在CSS文件（styles.css）中添加样式以标记已完成的任务：

css 复制代码

.completed {
  text-decoration: line-through;
}

结论：

通过这个完整的项目实例，我们演示了如何使用JavaScript实现一个交互式的待办事项列表。从构建HTML结构开始，逐步添加JavaScript功能，我们实现了任务的添加、编辑、完成标记和删除。这个项目不仅帮助读者了解如何使用JavaScript处理DOM元素，还展示了JavaScript在Web开发中的实用性和灵活性。读者可以通过进一步扩展和优化这个项目，深入探索JavaScript的强大功能，从而在实际项目中更加得心应手。