Question

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

请帮忙！在此先感谢。

Answer 1

正如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>

Answer 2

错误可能是由于在DOM节点准备好之前抓取了它们：

var textNode = document.getElementById('text');

这可能会返回null或undefined，因为尚未创建该DOM元素。

将此脚本放在身体末端可以解决您的问题。

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

中完成所有这些操作

$(document).ready(function() {
    var textNode = document.getElementById('text');
}

Answer 3

使用 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>

这应该为您工作。谢谢。

Javascript全局变量未按预期工作。救命？

3 个答案: