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 trialalahab2
9,709 PointsbindTaskEvents gives "Uncaught TypeError: Cannot read property 'querySelector' of undefined "
I am stuck at the minute 8 of the video.
I am getting an error "Uncaught TypeError: Cannot read property 'querySelector' of undefined " when i check/uncheck the items multiple times and the unchecked items stay in "completed" section.
Here is my code:
var taskInput = document.getElementById("new-task"); //new-task
var addButton = document.getElementsByTagName("button")[0]; //first button
var incompleteTaskHolder = document.getElementById("incomplete-tasks"); //incomplete-tasks
var completedTaskHolder = document.getElementById ("completed-tasks"); //completed-tasks
//New Task List Item
var createNewTaskElement = function(taskString){
var listItem = document.createElement("li");
//input (checkbox)
var checkBox = document.createElement("input"); //checkbox
//label
var label = document.createElement("label");
//input(text)
var editInput = document.createElement("input");
//button.edit
var editButton = document.createElement("button");
//button.delete
var deleteButton = document.createElement("button");
//Each element needs modifying
//Each element needs appending
listItem.appendChild(checkBox);
listItem.appendChild(label);
listItem.appendChild(editInput);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
return listItem
}
// Add a new task
var addTask = function() {
console.log("Add task...")
var listItem = createNewTaskElement("Some new task");
//Append listItem to incompleteTaskHolder
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
}
// Edit an existing task
var editTask = function() {
console.log("Edit task...");
}
// Delete a task
var deleteTask = function() {
console.log("Delete task...");
}
// Mark a task as complete
var taskCompleted = function() {
console.log("Task complete...");
var listItem = this.parentNode;
completedTaskHolder.appendChild(listItem);
bindTaskEvents(listItem.taskIncomplete);
}
// Mark a task as incomplete
var taskIncomplete = function() {
console.log("Task incomplete...");
var listItem = this.parentNode;
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem,taskCompleted);
}
var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
console.log("bind list item events");
//Select ListItem's children
var checkbox = taskListItem.querySelector("input[type=checkbox]");
var editButton = taskListItem.querySelector("button.edit");
var deleteButton = taskListItem.querySelector("button.delete");
//Bind editTask to editButton
editButton.onclick = editTask;
//Bind deleteTask to deleteButton
deleteButton.onclick = deleteTask;
//Bind checknboxEventHandler to checkbox
checkbox.onchange = checkBoxEventHandler;
}
//set the click handlet to the addTask function
addButton.onclick = addTask
//Cycle over incompleteTaskHolder ul list items
for(var i = 0; i < incompleteTaskHolder.children.length; i++) {
bindTaskEvents(incompleteTaskHolder.children[i], taskCompleted);
}
//Cycle over completeTaskHolder ul list items
for(var i = 0; i < completedTaskHolder.children.length; i++) {
bindTaskEvents(completedTaskHolder.children[i], taskIncomplete);
}
3 Answers
Jon Benson
12,168 PointsK-
I did see this, the comma versus the period? but is that the issue?
```// Mark a task as complete var taskCompleted = function() { console.log("Task complete..."); var listItem = this.parentNode; completedTaskHolder.appendChild(listItem); bindTaskEvents(listItem.taskIncomplete);
// Mark a task as incomplete var taskIncomplete = function() { console.log("Task incomplete..."); var listItem = this.parentNode; incompleteTaskHolder.appendChild(listItem); bindTaskEvents(listItem,taskCompleted);
alahab2
9,709 PointsIn any case thanks a lot for your time chrisp!
chrisp
13,686 PointsI took a glimpse at your JS code. Just saw something that is maybe causing that message.
//set the click handlet to the addTask function
addButton.onclick = addTask
So, you are assigning the addButton.onclick method to something that is undefined and is left open.
Try changing to this
//set the click handlet to the addTask function
addButton.onclick = addTask( );
That may solve it for that error, unless there are more bugs or typos. Which I haven't look through enough to tell ya. Good luck.
alahab2
9,709 PointsThanks a lot for taking a look at the code. Fortunately Jon found the typo causing the error in the comment above.
I am a complete newbie to JS. Maybe my question will be stupid... You say than addTask is undefined and left open.
If you look in the beginning of the code there is a variable
var addTask = function() {
console.log("Add task...")
var listItem = createNewTaskElement(taskInput.value);
//Append listItem to incompleteTaskHolder
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
}
Doesn't it mean that addTask is defined and that later by saying
addButton.onclick = addTask
i am calling this variable?
chrisp
13,686 PointsAh my bad. I guess I miss seeing the variable attach to a function. Sorry about that I should of took a longer time reading through your codes. No stupid question at all. The stupidity was from my side.
A vote for Jon and I am glad it works.
alahab2
9,709 Pointsalahab2
9,709 PointsYEEEEES! Thank you so much!
What a silly mistake...I would never notice it!
Jon Benson
12,168 PointsJon Benson
12,168 PointsBoy I had trouble marking that to you! Ugh, time for sleep.
alahab2
9,709 Pointsalahab2
9,709 PointsThanks a lot for your help Jon Benson!