Javascript全局变量未按预期工作。帮忙？_Javascript_Variables_Global

Javascript全局变量未按预期工作。帮忙？

javascript variables

Javascript全局变量未按预期工作。帮忙？,javascript,variables,global,Javascript,Variables,Global,我是Javascript新手。我面临一个全局变量的问题。我不明白为什么全局变量不能工作，因为代码看起来还可以。请帮我解决这个问题。我会先简要解释一下代码。我在一个页面上有一些文本，当点击时会变成文本字段。当我在函数体中定义变量时，代码开始正常工作。当这些变量在以下代码中全局定义时，控制台显示此错误：未定义变量。这是我的代码： <!DOCTYPE HTML> <html> <head> <title>Span to Text Box - Demo

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


Span到文本框-Demo-DOM
var textNode=document.getElementById（'text'）；
var textValue=textNode.firstChild.nodeValue；
var textboxNode=document.getElementById（'textbox'）；
var doneButton=document.getElementById（'done'）；
函数更改（）
{
setAttribute（'value'，textValue）；
textNode.style.display='none'；
setAttribute（'type'，'text'）；
setAttribute（'type'，'button'）；
}
函数转换（）
{
textNode.firstChild.nodeValue=textboxNode.value；
textNode.style.display='block'；
setAttribute（'type'，'hidden'）；
setAttribute（'type'，'hidden'）；
}
点击我

请帮忙！

提前感谢。

此错误可能是由于在DOM节点准备就绪之前抓取它们造成的：

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

这可能返回

null

或

undefined

，因为DOM元素尚未创建

把这个脚本放在你身体的末端应该可以解决你的问题
或者，如果您想使用jQuery，可以在

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

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

Span到文本框-Demo-DOM 点击我 var textNode=document.getElementById（'text'）； var textValue=textNode.firstChild.nodeValue； var textboxNode=document.getElementById（'textbox'）； var doneButton=document.getElementById（'done'）；函数更改（） { setAttribute（'value'，textValue）； textNode.style.display='none'； setAttribute（'type'，'text'）； setAttribute（'type'，'button'）； } 函数转换（） { textNode.firstChild.nodeValue=textboxNode.value； textNode.style.display='block'； setAttribute（'type'，'hidden'）； setAttribute（'type'，'hidden'）； }
使用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>

Span到文本框-Demo-DOM 让textNode=document.getElementById（'text'）；设textValue=textNode.firstChild.nodeValue；让textboxNode=document.getElementById（'textbox'）；让doneButton=document.getElementById（'done'）；函数更改（） { setAttribute（'value'，textValue）； textNode.style.display='none'； setAttribute（'type'，'text'）； setAttribute（'type'，'button'）； } 函数转换（） { textNode.firstChild.nodeValue=textboxNode.value； textNode.style.display='block'； setAttribute（'type'，'hidden'）； setAttribute（'type'，'hidden'）； } 点击我

这应该对你有用。谢谢。
+1因为我认为你是对的，但尽管我喜欢jQuery，但我不会建议它只用于onload，尤其是不需要onload就可以完成的东西。@Renesis-我只想给OP尽可能多的选项。我不想成为那种只推荐jQuery的人：）我同意这个答案。摩羯座：这不是全局变量，这是你的时机。@摩羯座-我的荣幸。jQuery是一个惊人的库，它简化了许多繁琐的事情。但是如果你只是将它添加到你的项目中来解决这个问题，请记住，你也可以通过简单地将脚本移动到
@capricorn的底部来解决它-不，这不会解决它。问题是您的DOM元素尚未就绪，因此document.getElementById返回null。要解决此问题，您可以将脚本移动到正文的底部，以便在正文被解析、dom就绪后运行脚本，或者使用上面描述的jQuery构造。虽然与您的问题没有直接关系，但请不要像这样使用全局JavaScript变量，但请确保它们具有名称空间。更多详细信息，请访问@ziesemer谢谢我已经阅读了您推荐的文章每个JAVA-SCRIPT程序员应该知道什么？我想在这里与我的朋友们分享这篇最有用的帖子。这里是链接：jfriend00谢谢你的回复，你的回复真的帮助我解决了这个问题。你们真是太好了