javascript - 如何创建具有所有输入类型选项的动态待办事项列表：文本、复选框、日期框、Javascript 中的单选选项？

Question

我的代码没有像我想象的那样运行，我无法理解错误。我可以创建一个简单的文本框，当我单击添加按钮时会更新，但是当我添加另一个文本框、日期框、收音机等并相应地更新 JS 时，代码不再正常运行。

请在此处找到小提琴链接：https ://jsfiddle.net/hufflepuff_hamlet/r9uogxwL/3/

<div class="container"> <p>

<form method="POST" action="..." onsubmit="return checkForm(this);"></form>
<label for="new-task">Add</label><input id="new-task" type="text" placeholder="Task Name..."><br>
<label for="task-descr"></label><input id="task-descr" type="text" placeholder="Task Description..."><br>
<label>Date: <input type="text" size="12" placeholder="dd/mm/yyyy" name="startdate" id="startdate">
    <!--<small>(dd/mm/yyyy)</small>-->
    </label><br>
<input id="urgent" type="checkbox"><label for="urgent">Urgent</label><br>

<input type="radio" id="groceries" name="category" value="groceries">
<label for="groceries">Groceries</label>
<input type="radio" id="work" name="category" value="work">
<label for="work">Work</label>
<input type="radio" id="chores" name="category" value="other">
<label for="chores">Chores</label>


<button>Add</button>

var taskInput=document.getElementById("new-task");//Add a new task.
var taskInput=document.getElementById("task-descr");
var taskInput=document.getElementById("startdate");
var taskInput=document.getElementById("urgent");
var taskInput=document.getElementById("groceries");
var taskInput=document.getElementById("work");
var taskInput=document.getElementById("chores");

var addButton=document.getElementsByTagName("button")[0];//first button
var incompleteTaskHolder=document.getElementById("incomplete-tasks");//ul of #incomplete-tasks
var completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks


//New task list item
var createNewTaskElement=function(taskString){

    var listItem=document.createElement("li");

    //input (checkbox)
    var checkBox=document.createElement("input");//checkbx
    //label
    var label=document.createElement("label");//label
    //input (text)
    var editInput=document.createElement("input");//text
    //button.edit
    var editButton=document.createElement("button");//edit button

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

    label.innerText=taskString;

    //Each elements, needs appending
    checkBox.type="checkbox";
    editInput.type="text";
    editInput.type="text";
    editInput.type="text";
    editInput.type="checkbox";
    editInput.type="radio";


    editButton.innerText="Edit";//innerText encodes special characters, HTML does not.
    editButton.className="edit";
    deleteButton.innerText="Delete";
    deleteButton.className="delete";



    //and appending.
    listItem.appendChild(checkBox);
    
  
    listItem.appendChild(label);
    listItem.appendChild(editInput);
    listItem.appendChild(editButton);
    listItem.appendChild(deleteButton);
    return listItem;
}



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

    //Append listItem to incompleteTaskHolder
    incompleteTaskHolder.appendChild(listItem);
    bindTaskEvents(listItem, taskCompleted);

    taskInput.value="";

}

//Edit an existing task.

var editTask=function(){
console.log("Edit Task...");
console.log("Change 'edit' to 'save'");


var listItem=this.parentNode;

var editInput=listItem.querySelector('input[type=text]');
var label=listItem.querySelector("label");
var containsClass=listItem.classList.contains("editMode");
        //If class of the parent is .editmode
        if(containsClass){

        //switch to .editmode
        //label becomes the inputs value.
            label.innerText=editInput.value;
        }else{
            editInput.value=label.innerText;
        }

        //toggle .editmode on the parent.
        listItem.classList.toggle("editMode");
}




//Delete task.
var deleteTask=function(){
        console.log("Delete Task...");

        var listItem=this.parentNode;
        var ul=listItem.parentNode;
        //Remove the parent list item from the ul.
        ul.removeChild(listItem);

}


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

}


var taskIncomplete=function(){
        console.log("Incomplete Task...");
//Mark task as incomplete.
    //When the checkbox is unchecked
        //Append the task list item to the #incomplete-tasks.
        var listItem=this.parentNode;
    incompleteTaskHolder.appendChild(listItem);
            bindTaskEvents(listItem,taskCompleted);
}



var ajaxRequest=function(){
    console.log("AJAX Request");
}

//The glue to hold it all together.


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


var bindTaskEvents=function(taskListItem,checkBoxEventHandler){
    console.log("bind list item events");
//select ListItems 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 taskCompleted to checkBoxEventHandler.
            checkBox.onchange=checkBoxEventHandler;
}

//cycle over incompleteTaskHolder ul list items
    //for each list item
    for (var i=0; i<incompleteTaskHolder.children.length;i++){

        //bind events to list items chldren(tasksCompleted)
        bindTaskEvents(incompleteTaskHolder.children[i],taskCompleted);
    }

标签： javascripthtmljquerylistdynamic