Traversing Elements with querySelector

//Ploblem: User interaction 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-task");//incomplete-task
var completedTaskHolder = document.getElementById("completed-task");//completed-task

//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 elements, needs modified and appended
}
//Edit an existing task
var editTask = function() {
   console.log("Edit Task...");
  //When the edit button is pressed
    //if the paarent is .editMode
      //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 incompleteTaskHolder 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 incompleteTaskHolder ul list items
for(var i = 0; i < completedTaskHolderTasksHolder.children.length; i++){
      //bind events to list item's children (taskIncomplete)
  bindTaskEvents(completedTaskHolder.children[i], taskIncompleted);
}