如何使用JavaScript实现待办事项列表应用程序

在这个项目中，我使用JavaScript实现了一个简单的待办事项列表应用程序。本文将展示如何使用JavaScript来添加新的待办事项，并在界面上实时更新列表。

首先，我们需要一个HTML页面来展示应用程序的界面。在HTML页面中，我添加了一个输入框和一个按钮来添加新的待办事项，并使用一个无序列表来展示待办事项列表。

代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>T待办事项</title>
</head>
<body>
  <h1>待办事项</h1>

  <input type="text" id="todoInput" placeholder="输入一个新任务">
  <button onclick="addTodo()">添加</button>

  <ul id="todoList">
  </ul>

  <script src="todo.js"></script>
</body>
</html>

在JavaScript文件中，定义几个函数来实现待办事项列表的功能。

首先是addTodo函数，它用于将新的待办事项添加到列表中。该函数会从输入框中获取用户输入的文本，并将其添加到一个名为todos的数组中。然后，它会调用renderTodoList函数来渲染待办事项列表。

let todos = [];

function addTodo() {
  const todoInput = document.getElementById('todoInput');
  const todoText = todoInput.value;

  todos.push(todoText);

  renderTodoList();

  todoInput.value = '';
}

在上面的代码中，首先定义了一个空的todos数组来存储待办事项。当用户单击"Add Todo"按钮时，addTodo函数会获取输入框中的文本，并将其添加到todos数组中。然后，它会调用renderTodoList函数来重新渲染待办事项列表。

接下来是renderTodoList函数，它用于渲染待办事项列表。该函数会首先获取待办事项列表的DOM元素，然后清空该元素。接着，它会遍历todos数组，为每个待办事项创建一个列表项，并将其添加到列表中。

function renderTodoList() {
  const todoList = document.getElementById('todoList');
  todoList.innerHTML = '';

  for (let i = 0; i < todos.length; i++) {
    const todoItem = document.createElement('li');
    todoItem.textContent = todos[i];
    todoList.appendChild(todoItem);
  }
}

在上面的代码中，renderTodoList函数首先获取待办事项列表的DOM元素，然后通过将其innerHTML设置为空来清空列表。然后，它使用一个循环来遍历todos数组中的每个待办事项。对于每个待办事项，它会创建一个新的列表项，并将待办事项的文本内容设置为该列表项的文本。最后，它将该列表项添加到待办事项列表的DOM元素中。

如此就实现了一个简单的待办事项列表应用程序。用户可以在输入框中输入新的待办事项，并单击“添加”按钮来将其添加到列表中。列表会实时更新并展示所有待办事项。总体难度不大，但是对于我这个小白来说还是得动一番脑筋

使用javascript实现待办事项 | 青训营

如何使用JavaScript实现待办事项列表应用程序