使用 JavaScript 创建待办事项清单
TODO 清单通常用于记录我们在某一天需要完成的所有事项,将最关键的任务放在最上方,将最不重要的事项放在最下方。我们可以将其用于计划每天的日程。我们有灵活性向列表中添加新任务,同时删除已完成的任务。TODO 清单可用于完成以下四个主要任务:
- 添加新任务
-
删除任务
-
将任务标记为已完成
-
编辑任务
让我们看看下面的例子,以更好地理解如何使用 JavaScript 创建待办事项清单。
例子
<!DOCTYPE html>
<html lang="en">
<body>
<input type="text" placeholder="请在此处输入您的任务.." id="txtData">
<button onclick="todoList()">添加待办事项</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清单,同时删除输入的任务。
<!DOCTYPE html>
<html>
<body style="background-color:#EAFAF1">
<div id="tutorial">
<input type="text" placeholder="输入要完成的任务">
<button id="tutorial1">添加</button>
<div id="tutorial2"></div>
</div>
<script>
document.querySelector('#tutorial1').onclick = function(){
if(document.querySelector('#tutorial input').value.length == 0){
alert("请输入任务清单")
} else {
document.querySelector('#tutorial2').innerHTML += `
<div class="perform">
${document.querySelector('#tutorial input').value}
<button class="remove">删除任务
<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清单中显示该任务以及一个删除按钮。