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 DOM Scripting By Example Adding and Removing Names Registering Names

Uncaught ReferenceError: inputText is not defined

Error in the description. Here is the snap of the code:

https://w.trhou.se/pwzta5frr6

As you can tell - I get an error from the title if I define my variables with const/let/var inside the - form.addEventListener("submit") - block of code.

If I define it outside of that functions scope, it works fine. Why?

Thanks!

3 Answers

Dane Parchment
MOD
Dane Parchment
Treehouse Moderator 11,077 Points

Ok, your issue here is not understanding how variable scoping works with the es6 let and const variable types.

I am assuming that you are getting this error because you are trying to reference inputText outside of the event listener, am I correct? Assuming that you are, the problem has to do with the fact that let and const are block-level variables.

This means that they are only defined within the block of code they are created in. A block can be anything between: () or {}. Because you define your let inputText = some value here within the event listener, that is the only place you can reference the variable do to it's block level scope.

However, if you create the variable in global scope (outside all of the functions) then you can reference it, change it, etc. from wherever you want in your code. That is why it works when you have it outside of the event listener and then reference the variable anywhere, and also why it doesn't work if you create it inside the event listener and try to reference it anywhere outside of it.

Let me know if you need a better explanation.

Dane Parchment , I do understand what you are talking about (global and local scoping), but the thing that I don't get is how can a variable that I've created in the eventListener like so:

formField.addEventListener("submit", (e) => {

    e.preventDefault(); 
    let inputText = inputField.value;
});

... cause an error:

Uncaught ReferenceError: inputText is not defined

I don't get this. The way I see it - I'm only accessing the variable inputText inside the scope of the function and nowhere else, so it should work given the logic you've explained earlier, right?

Dane Parchment
Dane Parchment
Treehouse Moderator 11,077 Points

Well I just tested it, and it does work. The only way you could possibly be getting an undefined error is you are trying to reference inputText outside of the event listener.

I have no idea why, but this keeps happening to me. I've tried on workspaces (google chrome) and locally, using sublime text and firing up firefox browser.