Stuck

Hi, So I decided to be oversmart and rather than adding two separate functions for checkbox in complete and incomplete list I added one function which toggles based on the id of parent list.

But I am stuck with an error.

Here is my code:

/* This file contains javascrip code to add interactivity to a page where user can add, edit or delete tasks. The page name being operated upon is" index.html".*/

// Here we select all the pre-set objects on page on which we would be adding interactivity and assign these to global variables.

var addTaskButton = document.getElementsByTagName("button")[0]; //select add task button var addTaskName = document.getElementById("new-task"); //select add task name inputted by the user var incompleteTasksList=document.getElementById("incomplete-tasks"); // select list of incomplete tasks var completeTasksList=document.getElementById("completed-tasks"); // select list of complete tasks

//Here we define all the functions which would be used to add interactivity to the page index.htmls

// Function to add task. When the add button is pressed // Add a new list item to list ul id="incomplete-tasks" and create following elements with data coming from input id="new-task"

var addTask = function () { console.log("addTask button is pushed"); var newListItem = document.createElement("li"); //Further add following child elements //<input type="checkbox"> var newCheckbox = document.createElement("input");

//<label>From input id="new-task"</label> var newLabel = document.createElement("label");

//<input type="text"> var newInput = document.createElement("input"); //<button class="edit">Edit</button> var newEditButton = document.createElement("button"); //<button class="delete">Delete</button> var newDeleteButton = document.createElement("button");

//Append each child item to the newly created list item newListItem.appendChild(newCheckbox); newListItem.appendChild(newLabel); newListItem.appendChild(newInput); newListItem.appendChild(newEditButton); newListItem.appendChild(newDeleteButton);

incompleteTasksList.appendChild(newListItem);
bindEventListenersToTaskLists(newListItem);

}

//Function to delete task //When delete button is pressed for a task // Delete the list item from the parent ul be it "incomplete-tasks" or "complete-tasks"

var deleteTask = function () { console.log("delete button was pressed"); var listItem = this.parentNode; listItem.parentNode.removeChild(listItem); }

//Function to mark a task as complete or incomplete (toggle) // When checkbox is ticked set change the class of ul item from "incomplete-tasks" to "complete-tasks" or vice versa

var toggleTask = function() { var selectedListItem = this.parentNode; if (this.parentNode.getAttribute.id.toString() === "incomplete-tasks") {

        completeTasksList.appendChild(this.parentElement);
        bindEventListenersToTaskLists(selectedListItem);

    }
    else
    incompleteTasksList.appendChild(this.parentElement);
    bindEventListenersToTaskLists(selectedListItem);
}

// when edit button is pressed the task should become editable. var editTask= function() {}

// Function to bind event listners to each list items in the complete and incomplete list.

var bindEventListenersToTaskLists= function (selectedListItem,checkBoxEventHandler) { var selectedCheckbox=selectedListItem.querySelector("input [type=checkbox]"); var deleteButtonForSelectedListName = selectedListItem.getElementsByClassName ("delete"); var editButtonForSelectedListName = selectedListItem.getElementsByClassName ("edit"); // Bind checkBoxEventHander to Checkbox selectedCheckbox.onchange = checkBoxEventHandler; // Bind deletetask fucnction to delete button deleteButtonForSelectedListName.onclick = deleteTask; //bind editTask function to edit button editButtonForSelectedListName = editTask; }

// Here we set out event handlers

addTaskButton.onclick = addTask;

// Here we bind uncompleted tasks list items to event listeners // use a for loop to run the function bindEventListenerstoTaskLists functio on each list item

for (var i = 0; i < incompleteTasksList.children.length; i++) {
    console.log("binding incomplete");
    bindEventListenersToTaskLists(incompleteTasksList.children[i],toggleTask);
}

//Here we bind complete tasks list items to event listeners

for (var i = 0; i < completeTasksList.children.length; i++) {
    console.log("binding complete");
    bindEventListenersToTaskLists(completeTasksList.children[i],toggleTask);
}