Javascript全局变量未按预期运行。救命？

Question

Javascript全局变量未按预期运行。救命？

我是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>

Run Code Online (Sandbox Code Playgroud)

请帮忙！提前致谢。

Answer 1

jfr*_*d00 5

正如亚当所说，问题在于您在加载文档之前在文档上运行 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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，5 月前
查看次数：	12477 次
最近记录：	6 年，6 月前