JavaScript 创建一个待办事项清单

待办事项清单通常用来记录我们在一天内需要做的所有事情，最重要的任务在最上面，最不重要的事项在最下面。

我们可以使用它来计划我们的日常安排。我们可以灵活地向清单添加新任务，以及删除已完成的任务。待办事项清单用于完成以下四个主要任务：

添加新任务
删除任务
将任务标记为已完成
编辑任务

让我们通过以下示例来更好地理解如何使用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 列表中，并显示一个删除按钮。