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

Posted by Erik Wells
Erik Wells
5,403 Points

Uncaught TypeError: Cannot read property 'querySelector' of undefined

I'm getting an error in Chrome stating that my querySelector("input[type=checkbox]"); is undefined.

https://w.trhou.se/h1jgyaqxqc

Marcus Parsons
Marcus Parsons
15,719 Points

Hey Erik,

Can you go ahead and post a snapshot of your workspace? The snapshot button is on the workspace window in the top right corner and it will give you a URL to share.

1 Answer

Seth McCombs
Seth McCombs
16,767 Points
Seth McCombs
Seth McCombs
16,767 Points

Hey Erik! I didn't fix your code 100%, but I did find a couple errors that may get you moving in the right direction! First up, line 12 in your .js file, you have a typo of the word "document" 

var listItem = codument.createElement("li");

Line 88 has too many quotes

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

should become

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

and lastly, the function at the bottom

//cycle over completedTaskHolder ul list items

for(var i = 0; i < incompleteTaskHolder.children.length; i++){
    //bind events to list item's children (taskIncompleted)
  bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
}

should read 

//cycle over completedTaskHolder ul list items

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

I think incomplete and completed got a little mixed up! Any mods correct me if I'm wrong!!

Marcus Parsons
Marcus Parsons
15,719 Points

Just one comment, Seth, and that is that putting either of these is correct:

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

You can verify that this is true by encapsulating "checkbox" in your own program with a set of quotes that differ from the outside quotes. :P

Seth McCombs
Seth McCombs
16,767 Points
Seth McCombs
Seth McCombs
16,767 Points

Thanks Marcus! I forgot! Was paying too much attention to the console, and not enough to other parts of the code!

Marcus Parsons
Marcus Parsons
15,719 Points

No worries, good answer, though! I just hate that I can't see when someone edits their answer, or I would've jumped on it! haha :P