Javascript全局变量没有按预期工作.的帮助

Javascript Global Variables Not Working as expected. Help?

本文关键字：工作 帮助 全局变量 Javascript      更新时间：2023-09-26

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

请帮忙!

正如Adam所说，问题是您在文档加载之前正在文档上运行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');

这很可能返回null或undefined，因为DOM元素还没有创建。

将此脚本放在body的结尾应该可以解决您的问题。

或者，如果您想使用jQuery，您可以在

中完成所有这些
$(document).ready(function() {
    var textNode = document.getElementById('text');
}
相关文章：