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: Traversing Elements with querySelector

Chris Anderson
Chris Anderson
2,879 Points

Uncaught TypeError: undefined is not a function app.js

Hi,

On refreshing my page, I get a console log of "Bind list item events..." but then an error as follows:

Uncaught TypeError: undefined is not a function (Line 70) bindTaskEvents (Line 70) (anonymous function) (Line 94)

I can only assume the for loop is running and calling the bindTaskEvents function. It succeeds at printing to the console for the first line of the function but then fails. If I comment out the for loops and refresh, I don't get anything in the console - but as nothing else is calling the function, I can't pinpoint the problem.

Any ideas? Code here and thanks in advance:

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 the editTask to edit button
  editButton.onclick = editTask;

     //Bind the deleteTask to the delete button
  deleteButton.onclick = deleteTask;

    //Bind the checkBoxEventHandler to the checkbox
  checkBox.onchange = checkBoxEventHandler;
}

//************************** "Wire up the variables & Functions" *************************

//Set the click handler to the addTask function


addButton.onclick = addTask; //by not adding in the () at this point, we ensure the function isn't executed when code hits this point. It should only execute once the button is clicked.

//Cycle over incompleteTasksHolder ul List items
for (var i = 0; i < incompleteTasksHolder.children.length; i++) {
    //bind events to the list items children (taskCompleted)
  bindTaskEvents(incompleteTasksHolder.children)[i], taskCompleted;
}

//Cycle over completedTasksHolder ul List items
  for (var i = 0; i < completedTasksHolder.children.length; i++) {
  //bind events to the list items children (taskIncomplete)
    bindTaskEvents(completedTasksHolder.children)[i], taskIncomplete;
  }

Without seeing all the code it is tough to tell what is wrong, but I have a suggestion. You can try adding more console.log()s through out your code to help pinpoint where everything stops working.

Also, I added Markdown formatting to your code. Check out the Markdown Cheatsheet link that is about the Comment button to see how to do this.

Chris Anderson
Chris Anderson
2,879 Points

Thanks Erik. I've literally just figured it out actually - I'd put my closing parenthesis in the wrong place in this line: bindTaskEvents(completedTasksHolder.children)[i], taskIncomplete;

Should have been: bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);

Now that's fixed, I've noticed that when I alternate checking or unchecking the check boxes, the console is printing out the incorrect message for each event... so just need to crack that now!

Thanks again for your response

Np, nice spotting!