1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>images</title> 6 <script> 7 function showPic(whichPic) 8 { 9 var placeHolder=document.getElementById('placeHolder'); 10 var source=whichPic.getAttribute("href"); 11 placeHolder.setAttribute("src",source); 12 } 13 window.onload=showPic(whichPic); 14 </script> 15 </head> 16 <body> 17 <ul> 18 <li><a href="img/girl-1.gif" onclick="showPic(this);return false;">Girl-1</a></li> 19 <li><a href="img/girl-2.jpg" onclick="showPic(this);return false;" >Girl-2</a></li> 20 <li><a href="img/girl-3.jpg" onclick="showPic(this);return false;">Girl-3</a></li> 21 <li><a href="img/girl-4.jpg" onclick="showPic(this);return false;">Girl-4</a></li> 22 </ul> 23 <img id="placeHolder" src="img/placeHolder.png" alt="placeHolder"> 24 25 </body> 26 </html>
特别简单的小程序,就是点击一个链接,出来一张图片,而不打开新的窗口。
这样的执行没有问题,但如果我把script换成下面的:
1 window.onload=function showPic(whichPic) 2 { 3 var placeHolder=document.getElementById('placeHolder'); 4 var source=whichPic.getAttribute("href"); 5 placeHolder.setAttribute("src",source); 6 }
为什么就不对呢?
请各位帮忙~~多谢啦!
window.onload是页面完全加载完才执行的,你下面的代码让showPic这个函数只有在页面完全加载完才声明。
而页面DOM一出来就去给a绑定click事件,此时找不到showPic函数,故绑定click事件是无效的。
明白了,给力!
没有必要 window.onload 运行吧. 这只是一个函数. 你也只是需要一个函数而已.
1 window.onload=function showPic(whichPic) 2 { 3 var placeHolder=document.getElementById('placeHolder'); 4 var source=whichPic.getAttribute("href"); 5 placeHolder.setAttribute("src",source); 6 } 这样写有错误吗.
1 window.onload=function (whichPic) 2 { 3 var placeHolder=document.getElementById('placeHolder'); 4 var source=whichPic.getAttribute("href"); 5 placeHolder.setAttribute("src",source); 6 } 这样写才对吧
@河蟹社会: 我说的那样写,就实现不了不打开新窗口切换图片的功能。。。
改成你说的那样,去掉函数名也不对啊。。。
“没有必要 window.onload 运行吧. 这只是一个函数. 你也只是需要一个函数而已.”去掉后确实是对的。。。但为啥那样就不对呢。。。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
5 <title>images</title>
6 <script>
7 function showPic(whichPic)
8 {
9 var placeHolder=document.getElementById('placeHolder');
10 var source=whichPic.getAttribute("href");
11 placeHolder.setAttribute("src",source);
12 }
13 // 去掉这句话就ok了 window.onload=showPic(whichPic);
14 </script>
15 </head>
16 <body>
17 <ul>
18 <li><a href="img/girl-1.gif" onclick="showPic(this);return false;">Girl-1</a></li>
19 <li><a href="img/girl-2.jpg" onclick="showPic(this);return false;" >Girl-2</a></li>
20 <li><a href="img/girl-3.jpg" onclick="showPic(this);return false;">Girl-3</a></li>
21 <li><a href="img/girl-4.jpg" onclick="showPic(this);return false;">Girl-4</a></li>
22 </ul>
23 <img id="placeHolder" src="img/placeHolder.png" alt="placeHolder">
24
25 </body>
26 </html>
恩,你说的解决办法是可以的,多谢啦