新手，有个有关问题想不明白

新手，有个问题想不明白！html xmlnshttp://www.w3.org/1999/xhtmlheadscript typetext/javascrip

新手，有个问题想不明白！


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
var closeObj=document.getElementById("gc");
var floatObj=document.getElementById("gc");
function test(){
alert(closeObj);
alert(floatObj);
}
</script>
</head>
<body>
<div id="tc"><img src="images/2.jpg"/></div>
<div id="gc" onclick="test()"><img src="images/1-1.bmp"/></div>
</body>
</html>

上面这段代码，为什么当我单击下面的div的时候，会弹出两个null ,应该是返回两个div元素才对呀，javascript的代码到底是按什么顺序执行的？难道不是一行一行的解释下去的吗？哪位大神能够仔细的说清楚这个问题啊？
[解决办法]

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
//正因为是一行一行的解释下去的,
你在这里getElementById("gc")定义closeObj和floatObj是错误的：
因为此时<div id="gc"还没加载呢！
var closeObj=document.getElementById("gc");
var floatObj=document.getElementById("gc");
function test(){
alert(closeObj);
alert(floatObj);
}
</script>
</head>
<body>
<div id="tc"><img src="images/2.jpg"/></div>
<div id="gc" onclick="test()"><img src="images/1-1.bmp"/></div>
</body>
</html>
你可以把上面的JS脚本放到后面


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="tc"><img src="images/2.jpg"/></div>
<div id="gc" onclick="test()"><img src="images/1-1.bmp"/></div>
</body>
</html>
<script type="text/javascript">
window.onload=function(){
  var closeObj=document.getElementById("gc");
  var floatObj=document.getElementById("gc");

function test(){
alert(closeObj);
alert(floatObj);
}
</script>

也可以在页面加载完成的函数里定义控件变量


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
window.onload=function(){
  closeObj=document.getElementById("gc");//注意：此处定义不要用var，要定义为全局变量 
 
  floatObj=document.getElementById("gc");
}
function test(){
alert(closeObj);
alert(floatObj);
}
</script>
</head>
<body>
<div id="tc"><img src="images/2.jpg"/></div>
<div id="gc" onclick="test()"><img src="images/1-1.bmp"/></div>
</body>
</html>

[解决办法]
把脚本区放到body下面就行了，放上面执行的时候DIV还没有生成当然就null


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="tc"><img src="img/1.jpg"/></div>
<div id="gc" onclick="test()"><img src="img/2.jpg"/></div>
<script type="text/javascript">
var closeObj=document.getElementById("tc");
var floatObj=document.getElementById("gc");
function test(){
alert(closeObj);
alert(floatObj);
}
</script>
</body>
</html>

[解决办法]
更正一下：第一个建议“你可以把上面的JS脚本放到后面”的JS代码错了，应该是你顶楼的原装JS脚本代码：


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="tc"><img src="images/2.jpg"/></div>
<div id="gc" onclick="test()"><img src="images/1-1.bmp"/></div>
</body>
</html>
<script type="text/javascript">
var closeObj=document.getElementById("gc");
var floatObj=document.getElementById("gc");
function test(){
alert(closeObj);
alert(floatObj);
}
</script>

[解决办法]
确实是从上到下，顺序执行的。
var closeObj=document.getElementById("gc");
var floatObj=document.getElementById("gc");

getElementById 时，html 还没有加载，所以获取不到。

document.getElementById 代码放 window.onload 中

或者放到，所有html 代码后面
[解决办法]


...
//当代码运行到下面这两行的时候，只会从这两行上面寻找id为gc的元素，但是上面只有html,head,script三个标签而已，并不存在这样的元素，所以取得默认值null并赋给closeObj  floatObj。
var closeObj=document.getElementById("gc");
var floatObj=document.getElementById("gc");
...

[解决办法]

引用:

Quote: 引用:

更正一下：第一个建议“你可以把上面的JS脚本放到后面”的JS代码错了，应该是你顶楼的原装JS脚本代码：


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="tc"><img src="images/2.jpg"/></div>
<div id="gc" onclick="test()"><img src="images/1-1.bmp"/></div>
</body>
</html>
<script type="text/javascript">
var closeObj=document.getElementById("gc");
var floatObj=document.getElementById("gc");
function test(){
alert(closeObj);
alert(floatObj);
}
</script>

如果代码是一行行加载的话那么下面这段代码为什么第一个S是undefined呢？


<script type="text/javascript">
 var s="1";   
  function show1() {
    document.write(s+"<br>");
    var s="3";
    document.write(s+"<br>");
  }
  show1();  
</script>

javascript 预编译和处理的问题，var 申明的变量进行了预编译，赋值操作未执行，所以先输出 undefined
[解决办法]
因为在执行getElementById的时候，两个dom节点还不存在，所以两个变量被赋值为了null
[解决办法]

引用:

Quote: 引用:
Quote: 引用:
更正一下：第一个建议“你可以把上面的JS脚本放到后面”的JS代码错了，应该是你顶楼的原装JS脚本代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="tc"><img src="images/2.jpg"/></div>
<div id="gc" onclick="test()"><img src="images/1-1.bmp"/></div>
</body>
</html>
<script type="text/javascript">
var closeObj=document.getElementById("gc");
var floatObj=document.getElementById("gc");
function test(){
alert(closeObj);
alert(floatObj);
}
</script>
如果代码是一行行加载的话那么下面这段代码为什么第一个S是undefined呢？
<script type="text/javascript">
 var s="1";   
  function show1() {
//相当于：
var s;
    document.write(s+"<br>");
s = "3";
  //  var s="3";
    document.write(s+"<br>"); 
 
  }
  show1();  
</script>
javascript 预编译和处理的问题，var 申明的变量进行了预编译，赋值操作未执行，所以先输出 undefined

对的
[解决办法]
你的div都还没有加载，你过去的当然是空了。。。