<!DOCTYPE html>
<html>
<head>
<title>DOM第四章练习</title>
<script>
var description=document.getElementById('ol');
function showPic(whichpic){
var source=whichpic.getAttribute("href");
var text=whichpic.getAttribute('title');
description.firstChild.nodeValue=text;/*元素节点的第一个子节点为文本节点*/
var show=document.getElementById('show');
show.setAttribute('src',source);
}
var list1=document.getElementById('list2');
var links=list1.getElementsByTagName('a');
//alert(list1.length);
for (var i = 0; i < links.length; i++) {
links[i].click=function(){
showPic(this);
return false;
}
}
</script>
</head>
<body>
<h1>图片</h1>
<ul id="list2">
<li><a href="img/image1.jpg" title="1111">one</a></li>
<li><a href="img/image2.jpg" title="2222">two</a></li>
<li><a href="img/image3.jpg" title="3333">three</a></li>
</ul>
<img id="show" src="" alt="my picture" style="width: 300px;height: 450px;">
<p id="ol">choose Image</p>
</body>
</html>是在不清楚是哪里错了，为什么就提示getElementsByTagName为空呢？明明就有A标签的。万分感谢。
3 回答
已采纳
_潇潇暮雨
TA贡献646条经验 获得超225个赞
你需要将js代码放到window.onload中，页面加载是从上到下的，这时候DOM还没有初始化完成，自然取不到元素。貌似你应该是做选项卡，还需要注意一点，需要阻止默认事件，你这样url会发生跳转。
<!DOCTYPE html>
<html>
<head>
<title>DOM第四章练习</title>
<script>
window.onload = function(){
var description=document.getElementById('ol');
function showPic(whichpic){
var source=whichpic.getAttribute("href");
var text=whichpic.getAttribute('title');
description.firstChild.nodeValue=text;/*元素节点的第一个子节点为文本节点*/
var show=document.getElementById('show');
show.setAttribute('src',source);
}
var list1=document.getElementById('list2');
var links=list1.getElementsByTagName('a');
//alert(list1.length);
for (var i = 0; i < links.length; i++) {
links[i].click=function(){
showPic(this);
return false;
}
}
}
</script>
</head>
<body>
<h1>图片</h1>
<ul id="list2">
<li><a href="img/image1.jpg" title="1111">one</a></li>
<li><a href="img/image2.jpg" title="2222">two</a></li>
<li><a href="img/image3.jpg" title="3333">three</a></li>
</ul>
<img id="show" src="" alt="my picture" style="width: 300px;height: 450px;">
<p id="ol">choose Image</p>
</body>
</html>
cpp_app
TA贡献2条经验 获得超0个赞
你应该用jquery的写法：
$(function() {
var description=$('#ol');
function showPic(whichpic){
var source=whichpic.attr("href");
var text=whichpic.attr('title');
.........
for (var i = 0; i < links.length; i++) {
links[i].click=function(){
showPic(this);
return false;
}
}
})
添加回答
举报
0/150
提交
取消