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

Dorothy Daniel
Dorothy Daniel
12,723 Points

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);
 }
Dorothy Daniel
Dorothy Daniel
12,723 Points

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

Hashim Zakiullah
Hashim Zakiullah
1,373 Points

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.

Alexander Kallaway (Emelianov)
Alexander Kallaway (Emelianov)
10,307 Points

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

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

Dorothy Daniel
Dorothy Daniel
12,723 Points

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

Ian McAbee
Ian McAbee
6,448 Points

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.