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

Ralph Johnson
Ralph Johnson
10,408 Points
Posted by Ralph Johnson
Ralph Johnson
10,408 Points

taskListItem in "var checkBox = " returns "Uncaught ReferenceError" in JavaScript console

When Andrew typed in "taskListItem" as a parameter in:

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

I didn't question it. When he used it in conjunction with a method, in the line 

var checkBox = taskListItem.querySelector("input[type=checkbox]");

, a red flag went up in my head. I was expecting one of those "tutorial moments" where an instructor creates an error so that we can see what error might come up. Instead, Andrew's code functioned as intended, without an error being generated. I don't see how that's possible.

As a function parameter, it's just a placeholder variable--I get that. But when it's attached to a method call, it has to be defined somewhere as a var, doesn't it?

Can't really proceed with this until the console stops returning that error. I dl'd the finished code and still found no var declaration for taskListItem in the file. Why did it work for Andrew in the tutorial?

1 Answer

Ralph Johnson
Ralph Johnson
10,408 Points
Ralph Johnson
Ralph Johnson
10,408 Points

In case anybody looks at this question, I figured out what was wrong.

The function "bindTaskEvents" included several method calls on the taskListItem parameter, and 3 event handlers below that. So the closing curly brace needed to be below the last event handler, "checkBox.onchange = checkBoxEventHandler;" ,. I hadn't moved it, but rather typed in all the code AFTER the closing curly brace. So instead of using the variable within the body of the function, everything was being called OUTSIDE the function, causing the undefined variable error. Moving the closing curly brace to the end of the function body solved the problem by making "taskListItem" a local variable within the function body, instead of a global variable for the whole script.