JavaScript语句应该放在哪里？

贠(yun)靖

本帖最后由隋营营于 2012-5-7 10:30 编辑

自己写了一个测试下拉列表的页面，当选择项不同时换一幅图片：
下面是代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>select</title>

<script language="javascript">
      var pic=document.getElementById("pic");
      function replace(obj){
         pic.src=obj.options[obj.selectedIndex].value;
      }
</script>

</head>

<body>
<table border=1 align="center">
      <tr>
         <td><img id="pic" src="1.jpg"></td>
      </tr>
      <tr>
         <td align="center">
            <select name="slt">
                  <option value="1.jpg">春</option>
                  <option value="2.jpg">夏</option>
                  <option value="3.jpg">秋</option>
                  <option value="4.jpg">冬</option>
            </select>
         </td>
      </tr>
</table>
</body>

</html>
为什么我的<script>代码块（红色部分）放在<head>标签内部不起作用，而放在<body>标签内就正常了？
多个浏览器都试过，情况相同。是我的代码有问题吗？
非常感谢给出建议！

谭景宾 · 谭景宾

</head>
<script language="javascript">
      var pic=document.getElementById("pic");
      function replace(obj){
         pic.src=obj.options[obj.selectedIndex].value;
      }
</script>
<body>
应该是放在</head>与<body>之间吧。试试

隋营营 · 隋营营

谭景宾发表于 2012-5-6 22:17
var pic=document.getElementById("pic");
function replace(obj){
pic.src ...

NO！放在<body></body>之间正常，但放在<head></head>之间点击下拉列表没反应。
我记得JavaScript语句块应该放在<head></head>之间吧？

乔建国 · 乔建国

其实就是一个先后处理的问题，页面是线性加载的。如果你的JS处理需要在页面加载之前完成，那就放到head里头，如果不是则随意放置。
最好写上type属性 <script type=”text/javascript”>

隋营营 · 隋营营

乔建国发表于 2012-5-6 22:39
其实就是一个先后处理的问题，页面是线性加载的。如果你的JS处理需要在页面加载之前完成，那就放到head里头 ...

加上 type="text/javascript" 还是没有效果！
显然，把JS处理放在<head></head>之间（页面加载前），则JS代码不起作用。
我感觉不应该啊！

符云爵 · 符云爵

把
var pic=document.getElementById("pic");
这句放函数里边试试。

隋营营 · 隋营营

符云爵发表于 2012-5-7 09:59
把
var pic=document.getElementById("pic");
这句放函数里边试试。

OK，搞定！非常感谢！
能解释下是什么原因吗？

符云爵 · 符云爵

放函数外面是全局变量，你网页下面的内容还没加载完就获取它，那么pic是空值，你可以弹窗看看么，所以函数里边的效果肯定没用。建议不要使用全局变量，如果是全局变量也要在方法里边，需要的时候再初始化，js ,jq都一样，不像java，可以debug，变量多了你查起错来绝对头大。

帐号		自动登录	找回密码
密码			加入黑马

JavaScript语句应该放在哪里？

评分

7 个回复

评分