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

Alleene Lacaba
PLUS
Alleene Lacaba
Courses Plus Student 5,248 Points

"Uncaught Typeerror: Cannot read property 'querySelector of undefined"

Can anyone help me

Zachary Fine
Zachary Fine
10,110 Points

Hey Andrew...love the videos. I am having a similar error.

Here is my code: https://github.com/zfine416/CSS/blob/master/html/app.js

Zachary,

For that error message, it looks like there is an issue with the for loop for the completedTaskHolder, the same as in two of the answers I posted below. You're making a comparison against incompleteTasksHolder.children.length when it should be completedTasksHolder.children.length.

So change the for loop at the very end of your file from

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

to

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

7 Answers

Hector F,

In your "for" loops you need to pass the index value "i", not the number "1". For example:

bindTaskEvents (incompleteTaskHolder.children[i], taskCompleted);

The reason that you are receiving the error is that when it tries to do the binding for the completeTaskHolder there is only one item, so the index would be "0". There is no item at index "1", therefore it is undefined.

Thank you! :)

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher

Alleene Lacaba

That error means that you're using the querySelector() method on something other than the document or a valid DOM element. Without seeing your code, we can't help you figure out the exact problem though. Can you should your code?

Alleene Lacaba
Alleene Lacaba
Courses Plus Student 5,248 Points

I didn't know how to upload it. I'm using the notepad plus plus : D

Same problem here The console points to line 61 where the .querySelector's are in the local variables of "bindTaskEvents".

//Problem: User interaction doesn't provide desired results.
//Solution: Add user interactivity so the suer 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-tasks"); //incomplete-tasks
var completedTasksHolder = document.getElementById("completed-tasks"); //completed-tasks

//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 the #new-task:
    //input checkbox
    //label
    //input (text)
    //button.edit
    //button.delete
    //Each elements, need modified and appended
}

//Edit an existing task
var editTask = function() {
  console.log("Add task...")
  //When the Edit button is pressed 
   //if the class of the parent is .editMode
      //Switch from .editMode
      //label text become thge 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("Add 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("Add task...")
  //When the Checkbox is checked
    //Append the task list item to the #completed-task
}

//Mark a task as incomplete
var taskIncomplete = function() {
  console.log("Add task...")
  //When the Checkbox is unchecked
    //Append the task list item to the #incompleted-task
}


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.onlcick = editTask;

    //bind deleteTask to delete button
    deleteButton.onclick = deleteTask;

    //bind checkBoxEventHandler to the checkbox
    checkBox.change = 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 the list item's children (taskCompleted)
  bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
}

//cycle over completedTasksHolder ul list items
for(var i = 0; i < incompleteTasksHolder.children.length; i++) {
   //bind events to the list item's children (taskIncomplete)
  bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
}

Having fun with the class so far, just want this solved so I can move on. Much appreciated to anyone that can find my problem

Jeremy,

I didn't have a chance to actually try your code, but I think that your issue is with the for loop for the completedTaskHolder. You're making a comparison against incompleteTasksHolder.children.length when it should be completedTasksHolder.children.length.

So change

//cycle over completedTasksHolder ul list items
for(var i = 0; i < incompleteTasksHolder.children.length; i++) {
   //bind events to the list item's children (taskIncomplete)
  bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
}

to

//cycle over completedTasksHolder ul list items
for(var i = 0; i < completedTasksHolder.children.length; i++) {
   //bind events to the list item's children (taskIncomplete)
  bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
}
Kirill Babkin
Kirill Babkin
19,940 Points

Thank you Greg Humphrey it was actually my mistake.

I'm experiencing the same issue. "Uncaught TypeError: Cannot read property 'querySelector' of undefined VM90 custom.js:65" Please help!!

//Problem: User interaction doesn't provide desired results.
//Solution: Add interactivty so the user can manage daily tasks.



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




//Add a new task
  var addTask = function () { 
    console.log("...addTask...");
  //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("...editTask...");
    //When the Edit button is pressed
    //if the class of the parent 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("...deleteTask...");
  //When the Delete button is pressed
    //Remove the parent list item from the ul
  }

//Mark a task as complete
  var taskCompleted = function () {
    console.log("...askComplete...");
  //When the checkbox is checked
    //Append the task list item to the #completed-tasks
  }

//Mark a task as incomplete
  var taskIncomplete = function () {
    console.log("...taskIncomplete...");
  //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")
  //Selecct tastListItem'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 deleteTask to delete button 
  checkbox.onchange = checkBoxEventHandler;
}

  //Set the clic handler to the addTask function
  addButton.onclick = addTask;

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

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

            ```

Having the exact same problem.. any fixes?

Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

You have the number 1 and not the letter i as the index for the children.

Kevin Fitzhenry
Kevin Fitzhenry
30,096 Points

Having the same problem......

I don't get why Andrew Chalkley 's code doesn't illicit the same error in the console when you opens up the To Do List in the browser.

I'm pretty sure my code is an exact replica as his as I've been following the tutorial precisely..

Any help is MUCH appreciated!

Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

I responded to Hector F. above. If you post your code that'd be great.

Kevin Fitzhenry
Kevin Fitzhenry
30,096 Points

I have i in the index, not 1, for the children and still getting an error. Trying to figure out how to post the code...

Kevin Fitzhenry
Kevin Fitzhenry
30,096 Points

Uncaught TypeError: Cannot read property 'querySelector' of undefined app.js:92bindTaskEvents app.js:92(anonymous function)

Kevin,

I noticed a few errors in your JS code. The main one is that in your "for" loops you are using "1 < X" as your conditional, and in this case (for the sake of argument) 1 will always be less than X. This causes your index to increment beyond the number of child elements that exist. Changing the criteria to "i < x" will solve that issue and expose a couple others that are easy to fix.

So

for(var i = 0; i < incompleteTaskHolderTaskHolder.children.length; i++)

instead of

for(var i = 0; 1 < completedTaskHolderTaskHolder.children.length; i++)

Did that and combed some more this line from previous is still highlighted.

var checkBox = taskListItem.querySelector("input[type=checkbox]");