Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Perform: Traversing Elements with querySelector

I am getting a Uncaught TypeError for: var checkBox = taskListItem.querySelector("input[type=checkbox]");

I saw there was a solution is this very same problem, but it does not work for this situation. My code is below.

//Problem: User interaction does not provide the desired results. 
//Solution: Add interactivity so the user can manage daily tasks. 

var taskInput = document.getElementById("new-task");
var addButton = document.getElementsByTagName("button")[0];
var incompleteTasksHolder = document.getElementById("incomplete-tasks");
var completedTasksHolder = document.getElementById("completed-tasks"); 

//Add a new task.
var addTask = function() {
  console.log("Add tasks...");
  //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 elemts will need to be modified and appended. 
}

//Edit an existing task. 
var editTask = function() {
  console.log("Edit tasks...");
  //When the edit button is pressed:
    //If the class of the parentis .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 tasks...");
  //When the delete button is pressed:
    //Remove the parent list item from the ul. 
}

//Mark a task as complete. 
var taskCompleted = function() {
  console.log("Tasks 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 the check box.
    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 < incompleteTasksHolder.children.length; i++) {
  //Bind events to list item's children (taskIncompleted).
  bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
 }

While the answer that Hashim provided fixed a problem that I did not know I had (thank you Hashim), his answer does not correct the "Uncaught TypeError" problem I received from the Console.

4 Answers

Hi Dorothy,

Check the last two lines of your code, both of them should have: completedTasksHolder.children.length

You probably forgot to match them when you copied the code from above.

I've made the exact same mistake that Hashim had mentioned. Be careful, everyone! :)

I'm having the same issue. Was this ever resolved??

No Janice, this was never solved. I still have the problem. Not sure how to solve it.

Hello Dorothy,

Instead of:

for(var i = 0; i < incompleteTasksHolder.children.length; i++) { bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted) }

The last chunk of code should read as:

for(var i = 0; i < completedTasksHolder.children.length; i++) { bindTaskEvents(completedTasksHolder.children[i], taskIncomplete); }

...the dangers of copying and pasting. I had the same issue.