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: Appending and Removing Elements

alahab2
alahab2
9,709 Points

bindTaskEvents 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

K-

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
alahab2
9,709 Points

YEEEEES! Thank you so much!

What a silly mistake...I would never notice it!

Boy I had trouble marking that to you! Ugh, time for sleep.

alahab2
alahab2
9,709 Points

Thanks a lot for your help Jon Benson!

alahab2
alahab2
9,709 Points

In any case thanks a lot for your time chrisp!

I 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
alahab2
9,709 Points

Thanks 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?

Ah 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.