数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学使用JavaScript创建待办事项列表
待办事项 (TODO) 列表通常用于跟踪我们一天需要完成的所有事情，最重要的任务放在顶部，最不重要的任务放在底部。
我们可以用它来规划我们的日常安排。我们可以灵活地向列表中添加新任务，也可以删除已完成的任务。待办事项 (TODO) 列表可以用于完成以下四个主要任务：
添加新任务
删除任务
标记任务为已完成
编辑任务
让我们看看下面的例子，以便更好地理解如何使用JavaScript创建待办事项列表。
示例
<!DOCTYPE html>
<html lang="en">
<body>
<input type="text" placeholder="Please Enter your Task Here.." id="txtData">
<button onclick="todoList()">AddTaskToDo</button>
<ul id="to_do_list"></ul>
<script>
function todoList() {
const myTask = document.getElementById('txtData');
const addToDoList = document.getElementById('to_do_list');
let originalValue = `<li> ${myTask.value} </li>`;
myTask.value = '';
addToDoList.insertAdjacentHTML('beforeend', originalValue);
}
</script>
</body>
</html>
运行上述脚本后，输出窗口将弹出，在网页上显示输入字段TODO和一个按钮。当用户在字段中输入任务并单击按钮时，它将以无序列表格式列出所有任务。
在JavaScript中使用querySelector()
当提供选择器或选择器集时，Document方法querySelector()返回文档中与它们匹配的第一个元素。如果没有匹配项，则返回Null。
语法
以下是querySelector()的语法：
element = document.querySelector(selectors);
示例
在下面的示例中，我们使用querySelector()运行脚本来创建一个TODO列表，并删除在TODO中输入的任务。
<!DOCTYPE html>
<html>
<body style="background-color:#EAFAF1">
<div id="tutorial">
<input type="text" placeholder="Enter Tasks To Complete">
<button id="tutorial1">Add</button>
<div id="tutorial2"></div>
</div>
<script>
document.querySelector('#tutorial1').onclick = function(){
if(document.querySelector('#tutorial input').value.length == 0){
alert("Please Enter Task TODO")
} else {
document.querySelector('#tutorial2').innerHTML += `
<div class="perform">
${document.querySelector('#tutorial input').value}
<button class="remove">Remove Task
<i class="far fa-trash-alt"></i>
</button>
</div>
`;
var current_tasks = document.querySelectorAll(".remove");
for(var i=0; i<current_tasks.length; i++){
current_tasks[i].onclick = function(){
this.parentNode.remove();
}
}
}
}
</script>
</body>
</html>
当脚本执行时，它将生成一个输出，其中包含一个名为TODO的输入字段和一个显示在网页上的按钮。当用户添加任务并单击按钮时，它将在TODO列表中显示该任务以及一个删除按钮。
更新于：2023年4月21日
1K+ 次浏览
广告