javascript - Js 代码不生效
本文介绍了javascript - Js 代码不生效的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
我按照书上的代码一点一点敲的，但是无法达到书上所说的效果。
预计的效果应该是：通过点击链接达到链接图片替代占位图片的位置。
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript图片库练习</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li id="imagegallery">
<a href="image/fireworks.jpg" title="A fireworks display">Fireworks</a>
</li>
<li>
<a href="image/coffee.jpg" title="A cup of black coffee" >Coffee</a>
</li>
<li>
<a href="image/rose.jpg" title="A red,red rose" >Rose</a>
</li>
<li>
<a href="image/bigben.jpg" title="The famous clock" >Big Ben</a>
</li>
</ul>
<img id="placeholder" src="image/placeholder.gif" alt="my image gallery" /><br />
<p id="description">Choose an image</p>
<script type="text/javascript" src="js/example.js"></script>
</body>
</html>
JavaScript代码
addLoadEvent(prepareGallery);
function prepareGallery() {
if (!getElementsByTagName || !getElementById) {return false;}
if (!document.getElementById("imagegallery")) {return false;}
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
links[i].onclick = function() {
showPic(this);
return false;
}
}
}
function showPic(whichpic){
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}解决方案
prepareGallery这个方法
if (!getElementsByTagName || !getElementById) {return false;}这个方法报错了，我猜想是不是应该是这样
if (!doucument.getElementsByTagName || !doucument.getElementById) {return false;}另外调试的时候可以借助chrome或者firefox的控制台，可以提高效率。
这篇关于javascript - Js 代码不生效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
