无法将输入值传递给JavaScript变量

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.

但是，当您加载页面时，您会看到Uncaught ReferenceError: test is not defined控制台中Uncaught ReferenceError: test is not defined 。

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

这是怎么回事，为什么您不能在myFunction之外访问test变量？

JavaScript的范围 (Scope in JavaScript)

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

您无法在myFunction之外访问test的原因是由于scope所致。 描述范围的另一种方法是上下文。

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.

由于test是在myFunction定义或创建的，因此仅在myFunction本身的上下文或范围中可用。 尝试在myFunction外部记录test将导致错误。

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

另一种表达方式是， test变量是函数作用域的，只能从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:

解决此问题的一种简单方法是从myFunction内记录test 。 然后，每当按下按钮时，输入的当前值都会记录到控制台：

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

您可以在此处阅读有关JavaScript范围的更多信息： 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.

虽然不可能从定义函数的外部直接访问函数范围的变量，但是在程序的其余部分中，仍有一些方法可以使用test的值。

将test值存储为全局变量 (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:

因此，使test在任何地方都可用的一种简单方法是将其保存为全局变量。 例如：

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.

这样，当myOtherFunction时，您就可以访问test的值。 但这是假设输入中已经包含一些文本，并且设置了test值的myFunction在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

在那里，对异步JavaScript有了扎实的了解就非常有用。 在本文中阅读有关它的更多信息： 异步JavaScript的演变：从回调到承诺，再到异步/等待

从函数返回测试 (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.

您可以从定义了原始功能的外部访问test另一种方法是简单地从该函数返回测试。 然后，当您从另一个函数调用它时，就可以访问test 。

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

然后，您可以创建另一个按钮以将test的值附加到页面并将myOtherFunction附加到该按钮。

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:

它在起作用：

翻译自: https://www.freecodecamp.org/news/cant-pass-an-input-value-into-a-javascript-variable/