Javascript 全局变量未按预期工作。 帮助？
[英]Javascript Global Variables Not Working as expected. Help?
问题描述
I am new to Javascript.
我是 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:这是我的代码：
<!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.提前致谢。
3 个解决方案
解决方案1
5 已采纳 2011-11-26 17:53:51
As Adam said, the issue is that you are running javascript on the document before the document has been loaded.正如亚当所说，问题在于您在加载文档之前在文档上运行 javascript。 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 代码移动到正文的末尾，这样文档就已经被解析并在您的代码像这样运行之前准备好了：
<!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>
解决方案2
4 2011-11-26 17:45:47
The error is likely caused by grabbing DOM nodes before they're ready:该错误可能是由于在 DOM 节点准备就绪之前抓取它们造成的：
var textNode = document.getElementById('text');
This is likely returning either null or undefined since that DOM element hasn't been created yet.这很可能返回null或undefined因为尚未创建该 DOM 元素。
Putting this script at the end of your body should 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');
}
解决方案3
1 2019-11-16 11:43:46
Use let in 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.谢谢。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.