复选框，“编辑”和“删除”按钮在新创建的项目上不起​​作用

 

谢谢

 

// TODO

 //问题：添加，删除和复选框不适用于新创建的项目

var taskInput = document.getElementById（“ new-task”）; //＃new-task

 var addButton = document.getElementsByTagName（“ button”）[0]; // DOM中的第一个按钮

var incompleteTasksHolder = document.getElementById（“ incomplete-tasks”）; //＃incomplete-tasks

 varcompleteTasksHolder = document.getElementById（“ completed-tasks”）; //＃completed-tasks

 //新任务列表项

var createNewTaskElement = function（taskString）{

     //创建列表项

    var listItem = document.createElement（“ li”）;

    //输入复选框

    var checkBox = document.createElement（“ input”）;

 

    var label = document.createElement（“ label”）;

    //输入（文本）

     var editInput = document.createElement（“ input”）; // text

     // button .edit

     var editButton = document.createElement（“ button”）; 

    // button.delete

     var deleteButton = document.createElement（“ button”）; 

    //每个元素都需要修改

    checkBox.type =“ checkbox”;

    editInput.type =“文字”;

    editButton.innerText =“编辑”;

    editButton.className =“编辑”;

    deleteButton.innerText =“删除”;

    deleteButton.className =“删除”;

    label.innerText = taskString;

 

    listItem.appendChild（label）;    

    listItem.appendChild（editInput）;    

    listItem.appendChild（editButton）;   

    listItem.appendChild（deleteButton）;     

    返回listItem;

}

 //添加一个新任务-与函数addTask（）类似；

var addTask = function（）{

     console.log（“添加任务...”）;

  //使用来自＃new-task的文本创建一个新的列表项

    var listItem = createNewTaskElement（taskInput.value）;

    //将listItem附加到incompleteTasksHolder

     incompleteTasksHolder.appendChild（listItem）;

    bindTaskEvents =（listItem，taskCompleted）;

    taskInput.value =“”;

}

 //编辑现有任务

 

var editTask = function（）{

     console.log（“ Edit task ...”）;

    var listItem = this.parentNode;

    var editInput = listItem.querySelector（“ input [type = text]”）; //返回第一个选择器（querySelectorAll需要一个索引正弦值）

     var label = listItem.querySelector（“ label”）;

    var containsClass = listItem.classList.contains（“ editMode”）;

        // //如果父级的类是.editMode

         if（containsClass）{

             //从editMode切换

            // //使标签文本成为输入的值

            label.innerText = editInput.value;

 

            editInput.value = label.innerText;

        }

         //在列表项的父项上切换.editMode

         listItem.classList.toggle（“ editMode”）;

}

 //删除现有任务

var deleteTask = function（）{

     console.log（“ Delete task ...”）;

        //从ul         var listItem = this.parentNode;中删除父列表项

；

        var ul = listItem.parentNode;

        //从ul（祖父母）        ul.removeChild（listItem）;中删除li（按钮的父母

）；

}

 //将任务标记为完整

var taskCompleted = function（）{

     console.log（“ Completed ...”）;

 

        //将任务列表项追加到＃completed-tasks

         var listItem = this.parentNode;

        completedTasksHolder.appendChild（listItem）;

        bindTaskEvents（listItem，taskIncomplete）;

}

 //将任务标记为不完整

var taskIncomplete = function（）{

     console.log（“ Incomplete ...”）;

        //将任务列表项追加到＃incomplete-tasks

         var listItem = this.parentNode;

        incompleteTasksHolder.appendChild（listItem）;

        bindTaskEvents（listItem，taskCompleted）;

}       

 var bindTaskEvents = function（taskListItem，checkBoxEventHandler）{

         console.log（“绑定列表项事件...”）;

 

 

        //选择taskListItem的子对象

        var checkBox = taskListItem.querySelector（“ input [type = checkbox]”）;

        var editButton = taskListItem.querySelector（“ button.edit”）;

        var deleteButton = taskListItem.querySelector（“ button.delete”）;

        //将editTask绑定到编辑按钮

        editButton.onclick = editTask;

        //将deleteTask绑定到删除按钮

        deleteButton.onclick = deleteTask;

        //将taskCompleted绑定到复选框

        checkBox.onchange = checkBoxEventHandler;

}

 //将点击处理程序设置为添加任务功能

addButton.onclick = addTask; //没有调用该函数（缺少（），只是一个引用）

 

//循环在incompleteTaskHolder UL列表项

为（VAR I = 0;我<  incompleteTasksHolder.children.length ; 我++） { 

//绑定taskCompleted到的复选框bindTaskEvents （incompleteTasksHolder 。孩子[我]，taskCompleted ）; } //循环过的completedTaskHolder UL列表项为（VAR我= 0;我< completedTasksHolder 。         

 

      孩子们。长度;  我++） { 

//绑定taskIncomplete到的复选框bindTaskEvents （completedTasksHolder 。孩子[我]，taskIncomplete ）; }         

 

 

答：请查看您的addTask函数定义。您将看到一个语法错误，该错误阻止您的bindTaskEvents调用按预期运行。