title: Uncaught TypeError: Cannot read property 'querySelector' of undefined
body: <p>Could you help me, please? When I run this, I get "Uncaught TypeError: Cannot read property 'querySelector' of undefined" in the 'bindTaskEvents' function where the function deals with the "completedTasksHolder" list. Trying this in the console:</p>
  
  <pre><code>console.log(completedTasksHolder.children[0]) 
  </code></pre>
  
  <p>returns the only li just fine. </p>
  
  <pre><code>var taskInput = document.getElementById("new-task"); // new-task
  var addButton = document.getElementsByTagName("button")[0]; // first button
  var incompleteTasksHolder = document.getElementById("incomplete-tasks"); // ul#incomplete-tasks
  var completedTasksHolder = document.getElementById("completed-tasks"); // ul#completed-tasks
  
  // Add a new task
  var addTask = function(){
      console.log("Add task...");
  }
  // Edit an existing task
  var editTask = function() {
      console.log("Edit task...");
  }
  
  var deleteTask = function() {
      console.log("Delete task...");
  // Delete an existing task
  
      // When the Delete button is pressed
          // Remove the parent li from the ul
  }
  
  var taskCompleted = function() {
      console.log("Complete task...");
  // Mark a task as complete
      // When the checkbox is checked
          // Append the task li to the #completed-tasks
  }
  
  // Mark a task as incomplete
  var taskIncomplete = function() {
      console.log("Incomplete task...");
      // When the checkbox is unchecked
          // Append the task li to the #incomplete-tasks
  }
  
  var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
      console.log("Bind li events");
      // select li's children
      var checkbox = taskListItem.querySelector("input[type=checkbox]");
      var editButton = taskListItem.querySelector("button.edit");
      var deleteButton = taskListItem.querySelector("button.delete");
  
      // bind editTask to editButton
      editButton.onclick = editTask;
  
      //  bind deleteTask to deleteButton;
      deleteButton.onclick = deleteTask;
  
      // bind checkBoxEventHandler to checkbox
      checkbox.onchange = checkBoxEventHandler;
  }
  
  // Set the click handler to the addTask function
  addButton.onclick = addTask;
  
  // Cycle over incompleteTasksHiolder ul list items
  for (var i = 0; incompleteTasksHolder.children.length; i++) {
          // bind events to li' children (taskCompleted)
      bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
  }     
  
  // Cycle over completedTasksHiolder ul list items
  
  for (var i = 0; completedTasksHolder.children.length; i++) {
          // bind events to li' children (taskCompleted)
      bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
  }     
  </code></pre>
  
  <p>What can be wrong here? Thanks!   </p>