使用 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>