Question

我只是使用javascript制作待办事项列表应用程序...其中你可以添加任务编辑它们并删除。但我的编辑任务功能正在用于dom操作之前的html文档中的列表项目但是之后我添加新元素，它不适用于新添加的元素

    //Problem: User interaction doesn't provide desired results.
//Solution: Add interactivty so the user can manage daily tasks.

var taskInput = document.getElementById('new-task'); //new-task
var addButton = document.getElementsByTagName('button')[0]; //first button
var incompleteTasksHolder = document.getElementById('incomplete-tasks'); //incompleteTasks
var completedTasksHolder = document.getElementById('completed-tasks');  //completedTasks

//new task list item 
var createNewTaskElement = function(taskString){
    //create listItem
    var listItem = document.createElement('li');

    //input(checkbox)
    var checkBox = document.createElement('input');

    //label
    var label = document.createElement('label');

    //input(text)
    var editInput = document.createElement('input');

    //button.edit
    var editButton = document.createElement('button');

    //button.delete
    var deleteButton = document.createElement('button');

    //Each element needs modifying
    checkBox.type = 'checkbox';
    editInput.type = 'text';

    editButton.innerText = 'edit';
    editButton.className = 'edit';
    deleteButton.innerText = 'delete';
    deleteButton.className = 'delete';

    label.innerText = taskString;

    //Each elements needs appended
    listItem.appendChild(checkBox);
    listItem.appendChild(label);
    listItem.appendChild(editInput);
    listItem.appendChild(editButton);
    listItem.appendChild(deleteButton);

    return listItem; 
}

//Add a new task
var addTask = function(){
  //Create a new list item with the text from #new-task:
    var listItem = createNewTaskElement(taskInput.value);

    //append listItems to incomplete tasks holder
    incompleteTasksHolder.appendChild(listItem);
}

//Edit an existing task
var editTask = function(){
    console.log('the edit task function is running');
    var listItem = this.parentNode;

    var editInput = listItem.querySelector('input[type="text"]');
    var label = listItem.querySelector('label');

    var containsClass = listItem.classList.contains('editMode');
    //if the class of the parent is .editMode
    if(containsClass){
        //Switch from .editMode
        //label text become the input's value
        label.innerText = editInput.value;
    }else{
      //Switch to .editMode
      //input value becomes the label's text
        editInput.value = label.innerText;
    }
    //Toggle .editMode on the listItem
    listItem.classList.toggle('editMode');
}

//Delete an existing task
var deleteTask = function(){
    var listItem = this.parentNode;
    var ul = listItem.parentNode;
    //Remove the parent list item from the ul
    ul.removeChild(listItem);
}

//Mark a task as complete
var taskCompleted = function() {
  console.log("Task complete...");
  //Append the task list item to the #completed-tasks
  var listItem = this.parentNode;
  completedTasksHolder.appendChild(listItem);
    bindTaskEvents(listItem,taskIncomplete);
}

//Mark a task as incomplete
var taskIncomplete = function(){
    //Append the task list item to the #incomplete-tasks
    var listItem = this.parentNode;
    incompleteTasksHolder.appendChild(listItem);
    bindTaskEvents(listItem,taskCompleted);
}

//Set the click handler to the addTask function
addButton.addEventListener("click", addTask);

var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
  console.log("Bind list item events");
  //select taskListItem's children
  var checkBox = taskListItem.querySelector("input[type=checkbox]");
  var editButton = taskListItem.querySelector("button.edit");
  var deleteButton = taskListItem.querySelector("button.delete");

  //bind editTask to edit button
  editButton.onclick = editTask;

  //bind deleteTask to delete button
  deleteButton.onclick = deleteTask;

  //bind checkBoxEventHandler to checkbox
  checkBox.onchange = checkBoxEventHandler;


}

//cycle over incompletetaskHolder ul list items
for(var i = 0; i < incompleteTasksHolder.children.length; i++){
    //bind events to list's item children(taskCompleted)
    bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
}

//cycle over completedTasksHolder ul list items
for(var i = 0; i < completedTasksHolder.children.length; i++){
  //bind events to list item's children (taskIncomplete)
  bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
}

Answer 1

无法将event附加到undefined元素。解决方案：定义后附加事件。

第二次不调用bindTaskEvents函数

1 个答案: