JS 小白, 求解JS 部分问题出在哪里,为什么不能显示出效果?
HTML<!doctype html>
<html>
<head>
<meta charset="utf-8" >
<title>drinks</title>
<style>
h1{
margin:40px;
}
li{
list-style:none;
float:left;
padding:10px;
}
img{
display:block;
margin:40px;
clear:both;
}
p{
margin-left:40px;
}
</style>
</head>
<body>
<h1>Whould do like some drink? </h1>
<ul class="gallery">
<li><a href="black.gif" title="black tea" class="popup">black tea</a></li>
<li><a href="blue.gif" title="blue tea" class="popup" >blue tea</a></li>
<li><a href="chai.gif" title="chai tea" class="popup" >chai tea</a></li>
</ul>
<script type="text/javascript" src="insert.js">
</script>
</body>
</html>
JS 部分:
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload != "function"){
window.onload=func;
}
else{
window.onload=function(){
oldonload();
func();
}
}
}
function showpic(){
//显示一张占位符图片cocktal.gif和一个"p"
var placeholder = document.createElement("img");
placeholder.setAttribute("id", "placeholder");
placeholder.setAttribute("src", "cocktail.gif");
placeholder.setAttribute("alt", "place holder");
var para = document.createElement("p");
para.setAttribute("id", "description");
var text = document.createTextNode("choose an image.");
para.appendChild(text);
var gallery=document.getElementsByClassName("gallery");
insertafter(para,gallery[0]);
insertafter(placeholder,gallery[0]);
}
function insertafter(newElement, targetElement){
//将上面的图片和P插入"ul"下面
var parent=targetElement.parentNode;
if(parent.lastChild==targetElement){
parent.appendChild(newElement);
}
else{
parent.insertBefore(newElement,targetElement.nextElementSibling);
}
}
function prepareLinks(){
//寻找所有"a", 调用pouPup函数,关闭onclick自己action。
var links=document.getElementsByTagName("a");
for( var i=0;i<links.length;i++){
if(links[i].getAttribute("class")=="popup"){
links[i].onclick=function(){
pouPup(this);
return !pouPup(this);
}
}
}
}
function pouPup(pic) {
//调换占位符图片和"P"中的文字
var source=pic.getAttribute("href");
var place=document.getElementById("placeholder");
place.setAttribute("src",source);
var text=pic.getAttribute("title");
var description=document.getElementById("description");
description.firstChild.nodeValue=text;
return true;}
addLoadEvent(prepareLinks)
addLoadEvent(pouPup)