Uncaught ReferenceError: inputText is not defined

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?

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.