When the for loop runs ???

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

//new task list item
function createNewTaskElement(taskString){
//create list items
  var listItem = document.createElement("li");
  var checkbox = document.createElement("input");
  var label = document.createElement("label");
  var editInput = document.createElement("input");
  var editButton = document.createElement("button");
  var deleteButton = document.createElement("button");
//appending list items
  listItem.appendChild(checkbox);
  listItem.appendChild(label);
  listItem.appendChild(editInput);
  listItem.appendChild(editButton);
  listItem.appendChild(deleteButton);

  return listItem;
}

//add a new task
function addTask(){
  console.log("Add task....");

//create a new list item with the text from #new-task
  var listItem = createNewTaskElement("some new task");

//append listItem to incompleteTasksHolder
  incompleteTasksHolder.appendChild(listItem);
  bindTaskEvents(listItem, taskCompleted);
}

//edit an existing task
function editTask(){
  console.log("Edit task....");

}

//delete an existing task
function deleteTask(){
  console.log("Delete task....");

}

//mark task as completed
function taskCompleted(){
  console.log("Complete task....");

//append the list item to the #completed-tasks
  completedTasksHolder.appendChild(this.parentNode); //this.parentNode is the listItem (this = checkbox)
  bindTaskEvents(this.parentNode, taskIncomplete); //this.parentNode is the listItem (this = checkbox)
}

//mark task as incomplete
function taskIncomplete(){
  console.log("Task incomplete....");

//append the list item to the #incomplete-tasks
  incompleteTasksHolder.appendChild(this.parentNode); //this.parentNode is the listItem (this = checkbox)
  bindTaskEvents(this.parentNode, taskCompleted); //this.parentNode is the listItem (this = checkbox)
}

function bindTaskEvents(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);
  console.log("incomplete running");
}

//cycle over incompleteTasksHolder 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);
  console.log("completed running");
}