黑马程序员技术交流社区

标题: JavaScript语句应该放在哪里？ [打印本页]

作者: 隋营营 时间: 2012-5-6 22:04
标题: JavaScript语句应该放在哪里？
本帖最后由隋营营于 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>标签内就正常了？
多个浏览器都试过，情况相同。是我的代码有问题吗？
非常感谢给出建议！

2012-05-06_215832.png (150.22 KB, 下载次数: 35)

作者: 谭景宾 时间: 2012-5-6 22:17
</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:20

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

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

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

作者: 隋营营 时间: 2012-5-7 07:19

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

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

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

作者: 隋营营 时间: 2012-5-7 10:04

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

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

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

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2