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

Myriam Sohail
Myriam Sohail
5,848 Points
Posted by Myriam Sohail
Myriam Sohail
5,848 Points

Uncaught TypeError: Cannot read property 'querySelector' of undefined

Hi guys, I'm having trouble with my querySelector (line 54). After looking at the previous issues and solutions I have tried using speech marks and not using them for the checkbox. Any help would be great.

Cheers

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


    var addTask = function(){
        console.log("add Task");
    }

var editTask = function(){  
}


var deleteTask = function(){    
    console.log("del Task");
}


var markComplete = function(){          
    console.log("mark complete");
}


var markInComplete = function(){        
    console.log("mark incomplete");
}



var bindTaskEvents = function(taskListItem, checkBoxEventHandler){

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

    var editButton = taskListItem.querySelector("button.edit");
    var deleteButton = taskListItem.querySelector("button.delete");

    checkBox.onchange = checkBoxEventHandler;

    editButton.onclick = editTask;

    deleteButton.onclick = deleteTask;
}



addButton.onclick = addTask


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


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

8 Answers

Martin Möhlmann
Martin Möhlmann
7,824 Points
Martin Möhlmann
Martin Möhlmann
7,824 Points

Type='checkbox' misses the single quotes. Don't use double, because it will break off the double quotes of input element too soon.

And it seems that in the declarations of the cycles, you have written children.[1] instead of children.[i]

Hope you have found these already and are on your way.

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Myriam,

This type of error that references something being undefined hints towards whatever you're trying to call that thing on as being just that: undefined. Meaning, you have yet to define that in your code. In this case, it looks like you're getting the error when you try to call 'querySelector' on 'taskListItem', because 'taskListItem' doesn't appear to have been defined anywhere. Looking through the code, I do not see 'taskListItem' as having been defined yet. Try defining that variable before calling something on it, and you should see better/different results and if nothing else, be able to debug further.

Erik

Myriam Sohail
Myriam Sohail
5,848 Points
Myriam Sohail
Myriam Sohail
5,848 Points

Hi, thanks for your response.

I believe the variable 'taskListItem' is defined in the function (bindTaskEvents) as an argument. Maybe I missed something but I can't see anywhere else it has been defined in the tutorial videos.

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Hmm..

I've edited your original post to show the code more clearly (using Markdown), and I do see that you've got it in bindTaskEvents, as you mentioned. Where exactly are you seeing this error? In a challenge?

Myriam Sohail
Myriam Sohail
5,848 Points
Myriam Sohail
Myriam Sohail
5,848 Points

Hi again,

I get the mentioned error when I run this project in chrome & safari developer console.

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Ah. That could simply be because you're running it without the HTML that is required for the elements that you're calling, or various other pieces/dependencies might be missing here or there. That would be a bit hard to tell from here.

From what I can see, things seem fine with your code, so if you're not running into problems on challenges, I'd just keep trekking on :)

Erik

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Perhaps Andrew Chalkley could weigh in and verify, but that's what it seems like from here!

Evan Gatchell
Evan Gatchell
5,878 Points
Evan Gatchell
Evan Gatchell
5,878 Points

This answer frustrates me.

diannalord
diannalord
7,284 Points
diannalord
diannalord
7,284 Points

I had the same error message. For me, it turned out that I had made typos in these two areas of code: (for example, I had accidently typed "incompleted" instead of "incomplete"). You may wish to review these two areas of your code for syntax or typo errors?

//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 completedTasksHolder ul list items for(var i = 0; i < completedTasksHolder.children.length; i++) { //bind events to list item's children (taskIncomplete) bindTaskEvents(completedTasksHolder.children[i], taskIncomplete); }

Peter Tascio
Peter Tascio
10,226 Points
Peter Tascio
Peter Tascio
10,226 Points

I had a ; at the end of this: for (var i = 0; i < incompleteTasksHolder.children.length; i++) which was a problem. Also I had entered children.[1] instead of children.[i] which was also a problem. The ' ' around checkbox don't seem to be necessary for my code to work.