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

Posted by Jude Campbell
Jude Campbell
Courses Plus Student 5,746 Points

Why does my Firebug say taskListItem is undefined?

Why does my Firebug say TypeError: taskListItem is undefined

Here's my code:

var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
    console.log('Bind list item events');

    var checkBox = taskListItem.querySelector("input[type=checkbox]");
    var editButton = taskListItem.querySelector("button.edit");
    var deleteButton = taskListItem.querySelector("button.delete");

    editButton.onclick = editTask;
    deleteButton.onclick = deleteTask;
    checkBox.onchange = checkBoxEventHandler;
};
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Jude,

The problem is likely to be elsewhere. This error means that the taskListItem you passed into the function is undefined.

I know it's a bit of code but go ahead and post all of it to make it easier to help.

Jude Campbell
Jude Campbell
Courses Plus Student 5,746 Points

Hi, Jason, Thanks for the reply, Here's the rest of my code (sorry if it's too long):

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

var createNewTaskElement = function(taskString) {

        var listItem = document.createElement("li");
        var checkBox = document.createElement("input"); 
        var label = document.createElement("label"); 
        var editInput = document.createElement("input"); 
        var editButton = document.createElement("button");
        var deleteButton = document.createElement("button");


        listItem.appendChild(checkBox);
        listItem.appendChild(label);
        listItem.appendChild(editInput);
        listItem.appendChild(editButton);
        listItem.appendChild(deleteButton);
        return listItem;
}

var addTask = function() {
    console.log("Add task...");
    var listItem = createNewTaskElement("Some new Task");

    incompleteTaskHolder.appendChild(listItem);
    bindTaskEvents(listItem, taskCompleted);
}
var editTask = function() {
    console.log("Edit task...");
}

var deleteTask = function() {
    console.log("Delete task...");

        var listItem = this.parentNode;
        var ul = listItem.parentNode;
        ul.removeChild(listItem);
};
var taskCompleted = function() {
    console.log("Complete task...");
        var listItem = this.parentNode;
        completedTaskHolder.appendChild(listItem);
        bindTaskEvents(listItem, taskInComplete);

}
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');
    var checkBox = taskListItem.querySelector("input[type=checkbox]");
    var editButton = taskListItem.querySelector("button.edit");
    var deleteButton = taskListItem.querySelector("button.delete");
    editButton.onclick = editTask;
    deleteButton.onclick = deleteTask;

    checkBox.onchange = checkBoxEventHandler;
};


addButton.onclick = addTask;


for(var i = 0; i < incompleteTaskHolder.children.length; i++) {

    bindTaskEvents(incompleteTaskHolder.children[1], taskCompleted);
}



for(var i = 0; i < completedTaskHolder.children.length; i++) {

    bindTaskEvents(completedTaskHolder.children[1], taskInComplete);
}

2 Answers

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

The problem is when you are calling the bindTaskEvents function, you're not using the loop increment variable i to reference the current child — you're using the number 1.

Change your code:

for(var i = 0; i < incompleteTaskHolder.children.length; i++) {

    bindTaskEvents(incompleteTaskHolder.children[1], taskCompleted);
}



for(var i = 0; i < completedTaskHolder.children.length; i++) {

    bindTaskEvents(completedTaskHolder.children[1], taskInComplete);
}

to:

for(var i = 0; i < incompleteTaskHolder.children.length; i++) {

    bindTaskEvents(incompleteTaskHolder.children[i], taskCompleted);
}



for(var i = 0; i < completedTaskHolder.children.length; i++) {

    bindTaskEvents(completedTaskHolder.children[i], taskInComplete);
}
Jude Campbell
PLUS
Jude Campbell
Courses Plus Student 5,746 Points
Jude Campbell
Jude Campbell
Courses Plus Student 5,746 Points

Wow I feel silly now, Thanks for the help.

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Don't feel silly! Typos and minor mistakes like this are probably the cause of the most headaches for developers/programmers!

That's why forums such as these are so great, it's like having someone proof-read a document!