我是Java语言的新手。我正在面对全局变量的问题。我无法弄清楚为什么全局变量不能正常工作，因为代码看起来还可以。请帮我解决这个问题。我先简单地解释一下代码。我在页面上有一些文本，单击后会更改为文本字段。当我在函数体内定义变量时，代码开始正常工作。当按以下代码全局定义这些变量时，控制台将显示此错误：未定义变量。这是我的代码：
<!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>
请帮助！在此先感谢。
正如亚当所说，问题是您在文档加载之前在文档上运行了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>
该错误很可能是由于在准备好DOM节点之前就抓住了它：
var textNode = document.getElementById('text');
由于尚未创建该DOM元素，因此很可能返回null或undefined。
将此脚本放在身体的末端应该可以解决您的问题。
或者，如果您想使用jQuery，则可以在]中完成所有这些操作>
$(document).ready(function() {
var textNode = document.getElementById('text');
}
使用let