通过一个完整的项目实例演示如何使用JavaScript实现待办事项列表
JavaScript是一种强大的脚本语言，它可以用于创建交互式的网页应用。在这篇文章中，我们将通过一个完整的项目实例——创建一个简单的待办事项列表，来演示如何使用JavaScript实现具体功能。
项目概述
我们的目标是创建一个简单的待办事项列表，用户可以在其中添加、删除和标记待办事项。我们将使用原生JavaScript来实现这个功能，无需任何库或框架。
HTML结构
首先，我们需要创建一个基本的HTML结构。在body标签中，我们需要一个输入框（用于添加新的待办事项）、一个按钮（用于提交新的待办事项）和一个ul元素（用于显示待办事项列表）。
<body>
<input id="todo-input" type="text" placeholder="Add a new task">
<button id="add-btn">Add</button>
<ul id="todo-list"></ul>
</body>
JavaScript实现
接下来，我们将使用JavaScript来实现待办事项列表的功能。首先，我们需要获取HTML元素，并为按钮添加点击事件监听器。
const input = document.getElementById('todo-input');
const addButton = document.getElementById('add-btn');
const todoList = document.getElementById('todo-list');
addButton.addEventListener('click', addTodo);
在addTodo函数中，我们创建一个新的li元素，将输入框中的值设置为li元素的文本，然后将li元素添加到待办事项列表中。最后，我们清空输入框的值。
function addTodo() {
const newTodo = document.createElement('li');
newTodo.textContent = input.value;
todoList.appendChild(newTodo);
input.value = '';
}
现在，我们已经可以添加待办事项了。接下来，我们需要实现删除待办事项的功能。我们可以为每个待办事项添加一个删除按钮，并为其添加点击事件监听器。
function addTodo() {
const newTodo = document.createElement('li');
newTodo.textContent = input.value;
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.addEventListener('click', function() {
todoList.removeChild(newTodo);
});
newTodo.appendChild(deleteButton);
todoList.appendChild(newTodo);
input.value = '';
}
通过这个简单的项目实例，我们可以看到JavaScript如何实现具体的功能。这只是JavaScript的基础用法，实际上，JavaScript的功能远不止于此。我们可以使用JavaScript来实现更复杂的功能，如动画、数据可视化、后端开发等。希望这个项目实例能对你有所帮助，让你更好地理解和使用JavaScript。
