Problem: List item elements not being created when a list item is created.

//Problem: User interaction does not provide desired results.
//solution: add interactivity so the user can manage the todo list.
var taskInput = document.getElementById('todoInput');
var addButton = document.getElementById('addTaskButton');
var incompleteTaskHolder = document.getElementById('incompleteTasks');
var completedTaskHolder = document.getElementById('completedTasks');



/*This function creates the the list items.*/
var createListItem = function(taskString){

    //list item will be the parent of the checkbox, label, text... etc
    var listItem = document.createElement("li");
    listItem.className = "p-t-2";

    //create and modify child elements
    var checkbox = document.createElement("input");
    checkbox.type = "checkbox";

    var label = document.createElement("label");
    label.innerHTML = taskString;

    var editInput = document.createElement("input");
    editInput.type = "text";
    editInput.className = "form-control task-form"; //apply classes

    var deleteButton = document.createElement("button");
    //check if innerText string is "undefined" (firefox)
    if (typeof deleteButton.innerText === "undefined"){
        deleteButton.innerContent = "Delete";
    } else {
        deleteButton.innerText = "Delete";
    }
    deleteButton.className = "btn btn-secondary delete"; //apply classes

    var editButton = document.createElement("button");
    //check if innerText string is "undefined" (firefox)
    if (typeof editButton.innerText === "undefined"){
        editButton.innerContent = "edit"
    } else {
        editButton.innerText = "edit"
    }
    editButton.className = "btn btn-secondary edit"; //apply classes

    //append child elements to listItem parent.
    checkbox.appendChild(listItem);
    label.appendChild(listItem);
    editInput.appendChild(listItem);
    deleteButton.appendChild(listItem);
    editButton.appendChild(listItem);

    console.log("Task created"); //console message
    return listItem; //return the listItem
}



/*This function adds the created list items from createListItem function
to the unordered list html & incompleteTaskHolder on the click event of
addButton */
var addTask = function () {
    //create variable listItem and store the returned created item from createListItem
    var listItem = createListItem(taskInput.value); //use the value of taskInput as the taskString

    //append listItem to incompleteTaskHolder
    incompleteTaskHolder.appendChild(listItem);
    bindTaskEvents(listItem, taskCompleted);
    console.log("Task added!"); //console message
}



//edit existing tasks
var editTask = function (){
    console.log("Task in edit-mode");
}



//delete tasks
var deleteTask = function () {
    //traversing:
    //create a variable to store the li from the listItem's parent
    var listItem = this.parentNode;

    //create a variable to store the ul as listItem's parent
    var ul = listItem.parentNode;

    //remove the child
    ul.removeChild(listItem);

    console.log("task deleted!"); // console message
}



//mark tasks completed
var taskCompleted = function (){
    //append the list item to completedTasks
    var listItem = this.parentNode;

    //add listItem to parent node (completedTaskHolder)
    completedTaskHolder.appendChild(listItem);

    //bind task events to the new list item.
    bindTaskEvents(listItem, taskIncomplete);

    console.log("task completed!"); //console message
}



//mark tasks incomplete
var taskIncomplete = function () {
    //
    var listItem = this.parentNode;

    //add listItem to parent node (incompleteTaskHolder)
    incompleteTaskHolder.appendChild(listItem);

    //bind task events to the new list item.
    bindTaskEvents(listItem, taskCompleted);

    console.log("task incomplete!"); //console message
}



/*This function binds the list item event elements (checkboxes and buttons) to the
appropriate event handers*/
var bindTaskEvents = function (listItem, checkboxEventHandler) {

    //create variables to store each element (get element by type)
    var checkbox = listItem.querySelector("input[type=checkbox]");
    var editButton = listItem.querySelector("button.edit");
    var deleteButton = listItem.querySelector("button.delete");

    //set event handlers
    editButton.onclick = editTask;
    deleteButton.onclick = deleteTask;
    checkbox.onchange = checkboxEventHandler;

    console.log("List item events bound"); //console message
}



//while i is less than then number of items in incompleteTaskHolder (ul) children (li) bind the events to the (ul) children (li) using the bindTaskEvents function
for(var i = 0; i < incompleteTaskHolder.children.length; i++){
    bindTaskEvents(incompleteTaskHolder.children[i], taskCompleted);
    console.log("Tasked added to incompleteTaskHolder"); //console message
}



//while i is less than then number of items in completedTaskHolder (ul) children (li) bind the events to the (ul) children (li) using the bindTaskEvents function
for(var i = 0; i < completedTaskHolder.children.length; i++){
    bindTaskEvents(completedTaskHolder.children[i], taskIncomplete);
    console.log("task added to completedTaskHolder"); //console message
}



//wiring
addButton.onclick = addTask; //onclick run addTask function