Interactive web pages with JS

I've gone through this code five times, and five times, nothing has been wrong. Why is it only showing 2 List items bound in the console? Why won't the incomplete and complete checkboxes show correctly in the console? When I click on any items in todo, they show completed whether they are checked or not so the counter keeps going. When I click on the completed, it shows incomplete whether or not its checked and again the counter keeps going. I can't find where the issues is, thought it was in the last portion of the code, but mine matches what the instructor wrote. Any help is greatly appreciated.

Thanks, Tracey

//Problem: User interactions doesn't provide desired results. //Solution: Add interactivity 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"); //incomplete-tasks var completedTasksHolder = document.getElementById("completed-tasks"); // completed-tasks

//Add a new task var addTask = function() { console.log("Add task...."); //When the button is pressed //Create a new list item with the text from #new-task: //Input (checkbox) //Label //input (text) //Button.edit //Button.delete //Each element, needs modified and appended }

//Edit an existing task var editTask = function() { console.log("Edit task...."); //When the Edit button is pressed //Switch from .editMode //Label text become the input's value //else //Switch to .editMode //Input value becomes the label's text

//Toggle .editMode on the parent

} //Delete an existing task var deleteTask = function() { console.log("Delete task...."); //When the Delete button is pressed //Remove the parent list item from the ul } //Mark a task as complete var taskCompleted = function() { console.log("Task complete...."); //When the Checkbox is checked //Append the task list item to the #completed-tasks } //Mark a task as incomplete var taskIncomplete = function() { console.log("Task incomplete...."); //When the Checkbox is unchecked //Append the task list item to the #incomplete-tasks }

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;

}

//Set the click handler to the addTask function addButton.onclick = addTask;

//Cycle over incompleteTasksHolder ul List Items for(var i = 0; i < incompleteTasksHolder.children.length; i++) { //bind events to list item's children (taskCompleted) bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted); } //Cycle over completeTasksHolder 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); }