Can't Pass an Input Value Into a JavaScript Variable

Imagine the following scenario – you have a simple input and a button. When a user types into the input and presses the button, the text from the input should be logged to the console.

Here's what you have so far:

<input id="search" placeholder="Search for..."></input>
<button value='send' id="submit" onclick="myFunction()">Search</button>

<div id="alpha"></div>

function myFunction() {
  const test = document.getElementById("search").value;
}

console.log(test);

But when you load the page you see Uncaught ReferenceError: test is not defined in the console.

What's going on here, and why can't you access the test variable outside of myFunction?

Scope in JavaScript

The reason you can't access test outside of myFunction is due to scope. Another way to describe scope is context.

Because test was defined or created within myFunction, it's only available in the context or scope of myFunction itself. Trying to log test outside of myFunction will cause an error.

Another way to put it is that the test variable is function scoped, and can only be logged from within myFunction.

An easy way to fix this is to log test from within myFunction. Then whenever the button is pressed, the current value of the input will be logged to the console:

function myFunction() {
  const test = document.getElementById("search").value;
  console.log(test);
}

You can read more about scope in JavaScript here: An introduction to scope in JavaScript

How to access a variable outside a function

While it's not possible to directly access a function scoped variable from outside the function it was defined in, there are some ways to use the value of test throughout the rest of the program.

Store the value of test as a global variable

The global scope is the very top level of your program, outside of all other functions. Variables in the global scope are available throughout the rest of your program.

So an easy way to make test available everywhere is to save it as a global variable. For example:

let test = '';

function myFunction() {
  test = document.getElementById("search").value;
}

function myOtherFunction() {
  console.log(test);
}

Then you'd be able to access the value of test when myOtherFunction is called. But this is assuming that the input already has some text in it, and that myFunction, which set's the value of test, is called before myOtherFunction.

That's where a solid understanding of asynchronous JavaScript comes in handy. Read more about it in this article: The Evolution of Async JavaScript: From Callbacks, to Promises, to Async/Await

Return test from the function

Another way you can access test from outside the original function it's defined in is to simply return it from that function. Then, when you call it from another function, you'll have access to test.

Then you can create another button to append the value of test to the page and attach myOtherFunction to that button.

For example:

<input id="search" placeholder="Search for..."></input>
<button value='send' id="submit" onclick="myFunction()">Search</button>
<button value='append' id="append" onclick="myOtherFunction()">Append</button>

<div id="alpha"></div>

function myFunction() {
  const test = document.getElementById("search").value;
  return test;
}

function myOtherFunction() {
  const myDiv = document.getElementById("alpha");
  myDiv.innerText = myFunction();
}

And here it is in action: