📌  相关文章
📜  待办事项列表中的 JavaScript 项目

📅  最后修改于: 2021-08-31 08:09:57             🧑  作者: Mango

简介: TODO List 是我们通常用来维护我们的日常任务或我们必须做的所有事情的列表,最重要的任务在列表的顶部,最不重要的任务在底部。它有助于计划我们的日常时间表。我们可以随时添加更多任务并删除已完成的任务。我们可以在 TODO 列表中执行的四个主要任务是:

  1. 添加任务
  2. 更新任务
  3. 阅读任务
  4. 删除任务

例子:

index.html


   

    
    
  
    
  
    
  
    To Do List

   

    
        
            
                
                                             ToDo List                                                              
            
        
    
       
        

Add Items

                                
            
                
                                        
                   
                                   
            
        
            

Tasks

            
            
            
        
       


    app.js
    window.onload = () => {
        const form1 = document.querySelector("#addForm");
      
        let items = document.getElementById("items");
        let submit = document.getElementById("submit");
      
        let editItem = null;
      
        form1.addEventListener("submit", addItem);
        items.addEventListener("click", removeItem);
    };
      
    function addItem(e) {
        e.preventDefault();
      
        if (submit.value != "Submit") {
            console.log("Hello");
      
            editItem.target.parentNode.childNodes[0].data
                = document.getElementById("item").value;
      
            submit.value = "Submit";
            document.getElementById("item").value = "";
      
            document.getElementById("lblsuccess").innerHTML
                = "Text edited successfully";
      
            document.getElementById("lblsuccess")
                            .style.display = "block";
      
            setTimeout(function() {
                document.getElementById("lblsuccess")
                                .style.display = "none";
            }, 3000);
      
            return false;
        }
      
        let newItem = document.getElementById("item").value;
        if (newItem.trim() == "" || newItem.trim() == null)
            return false;
        else
            document.getElementById("item").value = "";
      
        let li = document.createElement("li");
        li.className = "list-group-item";
      
        let deleteButton = document.createElement("button");
      
        deleteButton.className = 
            "btn-danger btn btn-sm float-right delete";
      
        deleteButton.appendChild(document.createTextNode("Delete"));
      
        let editButton = document.createElement("button");
      
        editButton.className = 
                "btn-success btn btn-sm float-right edit";
      
        editButton.appendChild(document.createTextNode("Edit"));
      
        li.appendChild(document.createTextNode(newItem));
        li.appendChild(deleteButton);
        li.appendChild(editButton);
      
        items.appendChild(li);
    }
      
    function removeItem(e) {
        e.preventDefault();
        if (e.target.classList.contains("delete")) {
            if (confirm("Are you Sure?")) {
                let li = e.target.parentNode;
                items.removeChild(li);
                document.getElementById("lblsuccess").innerHTML
                    = "Text deleted successfully";
      
                document.getElementById("lblsuccess")
                            .style.display = "block";
      
                setTimeout(function() {
                    document.getElementById("lblsuccess")
                            .style.display = "none";
                }, 3000);
            }
        }
        if (e.target.classList.contains("edit")) {
            document.getElementById("item").value =
                e.target.parentNode.childNodes[0].data;
            submit.value = "EDIT";
            editItem = e;
        }
    }
      
    function toggleButton(ref, btnID) {
        document.getElementById(btnID).disabled = false;
    }


    输出: