Javascript 全局变量未按预期工作。帮助？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8280301/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript Global Variables Not Working as expected. Help?
提问by Naeem Ul Wahhab
I am new to Javascript. I am facing a problem with global variables. I can't figure out that why the global variables are not working as the code looks ok. Please Help me solve this problem. I will breifly explain the code first.I have some text on a page which changes to text field when clicked. When I define the variables inside the functions body the code starts working fine. When these variables are defined globally as in the following code, the console displays this error: the variable is not defined. Here my code:
我是 Javascript 的新手。我正面临全局变量的问题。我无法弄清楚为什么全局变量不起作用，因为代码看起来不错。请帮我解决这个问题。我将首先简要解释代码。我在页面上有一些文本，单击时会更改为文本字段。当我在函数体内定义变量时，代码开始正常工作。当这些变量像以下代码一样全局定义时，控制台会显示此错误：变量未定义。这是我的代码：
<!DOCTYPE HTML>
<html>
<head>
<title>Span to Text Box - Demo - DOM</title>
<script type="text/javascript" language="javascript">
var textNode = document.getElementById('text');
var textValue = textNode.firstChild.nodeValue;
var textboxNode = document.getElementById('textbox');
var doneButton = document.getElementById('done');
function change()
{
textboxNode.setAttribute('value', textValue);
textNode.style.display = 'none';
textboxNode.setAttribute('type','text');
doneButton.setAttribute('type','button');
}
function changeBack()
{
textNode.firstChild.nodeValue = textboxNode.value;
textNode.style.display = 'block';
textboxNode.setAttribute('type', 'hidden');
doneButton.setAttribute('type','hidden');
}
</script>
</head>
<body>
<p id="text" onClick="change()">Click me!</p>
<form onSubmit="return false;">
<input type="hidden" id="textbox" />
<input type="hidden" id="done" onClick="changeBack()" value="Done" />
</form>
</body>
</html>
Please Help! Thanks in Advance.
请帮忙！提前致谢。
采纳答案by jfriend00
As Adam said, the issue is that you are running javascript on the document before the document has been loaded. There are a number of ways to fix this, but the simplest is to just move your javascript code to the end of the body so the document has already been parsed and is ready before your code runs like this:
正如亚当所说，问题在于您在加载文档之前在文档上运行 javascript。有很多方法可以解决这个问题，但最简单的方法是将您的 javascript 代码移动到正文的末尾，这样文档就已经被解析并在您的代码运行之前准备好了：
<!DOCTYPE HTML>
<html>
<head>
<title>Span to Text Box - Demo - DOM</title>
</head>
<body>
<p id="text" onClick="change()">Click me!</p>
<form onSubmit="return false;">
<input type="hidden" id="textbox" />
<input type="hidden" id="done" onClick="changeBack()" value="Done" />
</form>
<script type="text/javascript" language="javascript">
var textNode = document.getElementById('text');
var textValue = textNode.firstChild.nodeValue;
var textboxNode = document.getElementById('textbox');
var doneButton = document.getElementById('done');
function change()
{
textboxNode.setAttribute('value', textValue);
textNode.style.display = 'none';
textboxNode.setAttribute('type','text');
doneButton.setAttribute('type','button');
}
function changeBack()
{
textNode.firstChild.nodeValue = textboxNode.value;
textNode.style.display = 'block';
textboxNode.setAttribute('type', 'hidden');
doneButton.setAttribute('type','hidden');
}
</script>
</body>
</html>
回答by Adam Rackis
The error is likely caused by grabbing DOM nodes before they're ready:
该错误可能是由于在 DOM 节点准备就绪之前抓取它们造成的：
var textNode = document.getElementById('text');
This is likely returning either nullor undefinedsince that DOM element hasn't been created yet.
这可能会返回，null或者undefined因为该 DOM 元素尚未创建。
Putting this script at the end of your bodyshould solve your problem.
将此脚本放在您的身体末尾应该可以解决您的问题。
Or, if you'd like to use jQuery, you can do all this in
或者，如果你想使用 jQuery，你可以在
$(document).ready(function() {
var textNode = document.getElementById('text');
}
回答by Satyam Anand
Use letin place of var.
使用let代替var。
<!DOCTYPE HTML>
<html>
<head>
<title>Span to Text Box - Demo - DOM</title>
<script type="text/javascript" language="javascript">
let textNode = document.getElementById('text');
let textValue = textNode.firstChild.nodeValue;
let textboxNode = document.getElementById('textbox');
let doneButton = document.getElementById('done');
function change()
{
textboxNode.setAttribute('value', textValue);
textNode.style.display = 'none';
textboxNode.setAttribute('type','text');
doneButton.setAttribute('type','button');
}
function changeBack()
{
textNode.firstChild.nodeValue = textboxNode.value;
textNode.style.display = 'block';
textboxNode.setAttribute('type', 'hidden');
doneButton.setAttribute('type','hidden');
}
</script>
</head>
<body>
<p id="text" onClick="change()">Click me!</p>
<form onSubmit="return false;">
<input type="hidden" id="textbox" />
<input type="hidden" id="done" onClick="changeBack()" value="Done" />
</form>
</body>
</html>
This should work for you. Thanks.
这应该对你有用。谢谢。
