利用js创建一个简单的待办事项

我们将演示如何使用 JavaScript 创建一个简单的待办事项应用。

概述

我们的待办事项应用将具备以下功能：

用户可以添加新的待办事项。
用户可以删除已完成的待办事项。
用户可以标记待办事项为已完成。

HTML 结构

首先，我们需要创建基础的 HTML 结构。这包括一个待办事项列表，一个输入框和一个按钮，用户可以通过输入框输入待办事项，然后点击按钮添加到列表中。

<!DOCTYPE html>
<html>
<head>
    <title>Todo App</title>
</head>
<body>
    <input id="todo-input" type="text" placeholder="Enter a new todo...">
    <button id="add-button">Add</button>
    <ul id="todo-list"></ul>
</body>
</html>

JavaScript 实现

接下来，我们将用 JavaScript 来添加应用的功能。

首先，我们需要获取页面上的元素，并为按钮添加点击事件处理器。

const todoInput = document.getElementById('todo-input');
const addButton = document.getElementById('add-button');
const todoList = document.getElementById('todo-list');

addButton.addEventListener('click', addTodo);

然后，我们创建 addTodo 函数，它将新的待办事项添加到列表中。

function addTodo() {
    const todoText = todoInput.value;
    if (todoText === '') return;

    const todoItem = document.createElement('li');
    todoItem.textContent = todoText;
    todoItem.addEventListener('click', toggleTodo);

    const deleteButton = document.createElement('button');
    deleteButton.textContent = 'Delete';
    deleteButton.addEventListener('click', deleteTodo);

    todoItem.append(deleteButton);
    todoList.append(todoItem);

    todoInput.value = '';
}

在这个函数中，我们首先获取用户输入的内容，然后创建一个新的列表项，并添加用户输入的内容。然后，我们为新的待办事项添加点击事件处理器，当用户点击待办事项时，将其标记为已完成。我们还添加了一个删除按钮，当用户点击这个按钮时，将待办事项从列表中删除。

接下来，我们创建 toggleTodo 和 deleteTodo 函数。

function toggleTodo(event) {
    const todoItem = event.target;
    todoItem.classList.toggle('done');
}

function deleteTodo(event) {
    const deleteButton = event.target;
    const todoItem = deleteButton.parentElement;
    todoList.removeChild(todoItem);
}

在 toggleTodo 函数中，我们切换待办事项的 done 类，这将显示或隐藏一个表示待办事项已完成的样式（这个样式需要你在 CSS 中定义）。在 deleteTodo 函数中，我们从列表中删除待办事项。

总结

到这里我们的待办事项就完成啦~虽然它非常简单，但它展示了如何使用JavaScript来操作DOM以及处理事件。

用原生js实现待办事项｜ 青训营

利用js创建一个简单的待办事项

概述

HTML 结构

JavaScript 实现

总结

用原生js实现待办事项｜青训营