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 trialAlleene Lacaba
Courses Plus Student 5,248 Points"Uncaught Typeerror: Cannot read property 'querySelector of undefined"
Can anyone help me
Greg Humphrey
8,408 PointsFor 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
Greg Humphrey
8,408 PointsIn 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.
Alleene Lacaba
Courses Plus Student 5,248 PointsThanks much!
Hector F.
27,464 PointsThank you! :)
Dave McFarland
Treehouse TeacherThat 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
Courses Plus Student 5,248 PointsI didn't know how to upload it. I'm using the notepad plus plus : D
Jeremy Woodbridge
25,278 PointsSame 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
Greg Humphrey
8,408 PointsI 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
19,940 PointsThank you Greg Humphrey it was actually my mistake.
Hector F.
27,464 PointsI'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);
}
```
Joseph Szoke
15,087 PointsHaving the exact same problem.. any fixes?
Andrew Chalkley
Treehouse Guest TeacherYou have the number 1
and not the letter i
as the index for the children.
Kevin Fitzhenry
30,096 PointsHaving 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
Treehouse Guest TeacherI responded to Hector F. above. If you post your code that'd be great.
Kevin Fitzhenry
30,096 PointsI 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
30,096 PointsUncaught TypeError: Cannot read property 'querySelector' of undefined app.js:92bindTaskEvents app.js:92(anonymous function)
Greg Humphrey
8,408 PointsI 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++)
Jeremy Woodbridge
25,278 PointsDid that and combed some more this line from previous is still highlighted.
var checkBox = taskListItem.querySelector("input[type=checkbox]");
Zachary Fine
10,110 PointsZachary Fine
10,110 PointsHey Andrew...love the videos. I am having a similar error.
Here is my code: https://github.com/zfine416/CSS/blob/master/html/app.js