如何使用Javascript制作待办事项列表
作者：互联网
HTML
对于 html，您只需要一个元素和一个用于添加任务的按钮，它们下面是一个 div 元素，其中包含一个列表，该列表是任务所在的位置。如果需要，还可以向输入添加占位符，或者只是对其进行样式设置。在它下面，我们将创建一个带有列表的 div 元素，这将是任务所在的位置。这些元素中的每一个都有一个 id，我们将使用它来附加 javascript。我们也可以使用复选框，但它的 javascript 有点复杂，所以我只使用简单的方法。input
<html>
<body>
<!--we put them in a div so they can be aligned-->
<div>
<input placeholder="Add a task!" id="enterTask">
<button id="AddBtn">Create</button>
</div>
<div>
<ul id="taskList">
</ul>
</div>
</body>
</html>
创建任务
首先，我们需要获取存储在变量中的输入、按钮和无序列表元素。接下来，我们为按钮提供一个事件侦听器，因为它将是添加任务的按钮。我们将它设置为单击并为其提供函数。在函数内部，我们创建了一个名为task的变量，其中包含一个元素。它的 HTML 将与输入值相同，这意味着用户在输入元素中输入的任何内容都将是列表项文本。最后，我们通过在列表区域使用将其设置为任务变量来添加它的父级。liappendChild
当您运行它时，它应该添加您在输入中键入的任务！
var input = document.getElementById('enterTask');
var button = document.getElementById('addBtn');
var listArea = document.getElementById('taskList');
button.addEventListener('click', function() {
//adding the tasks
var task = document.createElement('li');
task.innerHTML = input.value;
listArea.appendChild(task);
});
删除任务
要删除它们，您必须在按钮事件侦听器内为任务/列表项提供一个事件侦听器。这是因为变量是局部变量，这意味着它们仅在事件侦听器的函数内部工作。我们为任务提供了一个单击事件和一个用于删除任务区域的子项的函数。在事件侦听器下，我们将放置一个 if 语句，其条件是，如果输入的长度为 0，则任务将在看到之前自动删除。这样就没有人可以做空任务了。removeChild
button.addEventListener('click', function() {
//adding the tasks
var task = document.createElement('li');
task.innerHTML = input.value;
listArea.appendChild(task);
//deleting the tasks
task.addEventListener('click', function() {
listArea.removeChild(task);
})
if (listLength.length === 0) {
listArea.removeChild(task);
}});
如何风格化
项目符号点在列表项上并不好看，因此我们可以通过将 ul 的列表类型设置为 none 来将其删除。您还可以通过添加间隙来为其提供带有边框和间距的边框和间距。剩下的就看你了！毕竟，您可以以任何您想要的方式制作待办事项列表。尝试在外观上发挥创意，就像每当完成新任务时我如何给我的动画一样！