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/