JavaScript Todo List 添加功能实现：添加待办事项

TodoList 是类似备忘录的一个功能，可以记录准备要做的事情，对于做完的事情可以进行删除。本文将介绍如何在已有静态 UI 的基础上，完成 Todo List 案例的添加功能。

1. 添加输入框和按钮

首先需要在 HTML 文件中添加一个输入框和一个按钮，用于用户输入待办事项并添加到列表中。

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="添加待办事项" id="newTaskInput">
  <button class="btn btn-outline-secondary" type="button" id="addTaskBtn">添加</button>
</div>

2. 获取元素和添加点击事件

在 JavaScript 文件中，获取输入框和按钮的元素，并为按钮添加点击事件。

const newTaskInput = document.getElementById('newTaskInput');
const addTaskBtn = document.getElementById('addTaskBtn');

addTaskBtn.addEventListener('click', addTask);

3. 编写添加待办事项函数

编写添加待办事项的函数 addTask，该函数首先获取输入框中的值，然后创建一个新的 li 元素，并将输入框中的值添加到 li 元素中，最后将 li 元素添加到待办事项列表中。

function addTask() {
  const newTaskText = newTaskInput.value.trim();

  if (newTaskText !== '') {
    const newTask = document.createElement('li');
    newTask.textContent = newTaskText;
    taskList.appendChild(newTask);
    newTaskInput.value = '';
  }
}

4. 运行代码

运行代码，可以看到现在已经可以通过输入框和按钮添加待办事项了。