如何使用Javascript制作待办事项列表

2022/11/27 23:24:56

编程Tag： javascript 数组函数传递 Java icode9 实际数组

本文主要是介绍如何使用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 来将其删除。您还可以通过添加间隙来为其提供带有边框和间距的边框和间距。剩下的就看你了！毕竟，您可以以任何您想要的方式制作待办事项列表。尝试在外观上发挥创意，就像每当完成新任务时我如何给我的动画一样！

标签：Javascript,函数,实际数组,传递,java,icode9,数组来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

这篇关于如何使用Javascript制作待办事项列表的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

如何使用Javascript制作待办事项列表

HTML

创建任务

删除任务

如何风格化

相关编程文章