資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
廣告