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
Adam Skaggs
4,512 PointsType error: Cannot read property 'querySelector' of undefined
Here is a link to my workspace as it stands, I worked beyond this video a bit without identifying my issue, sorry if that is confusing.
The console seems to hate what I have in line 77 [the line within my function defining var checkBox] - I know other people have hit on this issue but their answers were typos and I'm not seeing any.
Any help would be greatly appreciated!
2 Answers
Victoria Felice
14,760 PointsHi Adam, I noticed that inside your anonymous function, starting from line 19, several statements that modify each element are missing:
var createNewTaskElement = function(taskString) {
…
Line 19: //Each element needs modifying
checkBox.type = "checkbox"; etc.
…
Also, there is no semicolon at the end of your return statement.
}
I think that’s why you are getting undefined error in your line 77 var checkBox = taskListItem.querySelector("input[type=checkbox]"); I added these statements to your code and got no errors. Though, I am not sure in which video Andrew explains the need of modifying the elements. HTH.
Adam Skaggs
4,512 PointsFound a workaround... assigned a class to each of the checkboxes, then used the CSS selector the same way as the other two in that function. This seems to work, but I am finding other issues later in the track as well. Considering trying it in another browser.
Adam Skaggs
4,512 PointsAdam Skaggs
4,512 PointsOh thank you so much! You're the best. I must have missed a part of a video, and looking back over the code is actually much harder for me with all the comments describing what each section does. Thank you again!
Victoria Felice
14,760 PointsVictoria Felice
14,760 PointsYou are welcome, Adam. I'm glad it worked for you.
Victoria Felice
14,760 PointsVictoria Felice
14,760 PointsI found a video where Andrew explains modifying elements. Since, it is much later in this course, at this point you actually don’t have to have these lines of code that I recommended. I found actual problems that cause the error:
1.line 21: listItem.appendChild(input);
change it to:
listItem.appendChild(editInput);
2.line 24:
put semicolon at the end of your return statement
3.line 101: for(var i = 0; i < incompleteTasksHolder.children.length; i++) {
should read: for(var i = 0; i < completedTasksHolder.children.length; i++) {
So, just change incompleteTasksHolder.children.length to completedTasksHolder.children.length in your line 101 and your error will be gone! :)