慕粉1470882511
2016-12-22 14:19:16
<!DOCTYPE?html>
<html>
<head>
<title>DOM第四章練習(xí)</title>
<script>
var?description=document.getElementById('ol');
function?showPic(whichpic){
var?source=whichpic.getAttribute("href");
var?text=whichpic.getAttribute('title');
description.firstChild.nodeValue=text;/*元素節(jié)點的第一個子節(jié)點為文本節(jié)點*/
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標(biāo)簽的。萬分感謝。
3 回答
已采納

_瀟瀟暮雨
TA貢獻646條經(jīng)驗 獲得超225個贊
你需要將js代碼放到window.onload中,頁面加載是從上到下的,這時候DOM還沒有初始化完成,自然取不到元素。貌似你應(yīng)該是做選項卡,還需要注意一點,需要阻止默認事件,你這樣url會發(fā)生跳轉(zhuǎn)。
<!DOCTYPE?html> <html> <head> ????<title>DOM第四章練習(xí)</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;/*元素節(jié)點的第一個子節(jié)點為文本節(jié)點*/ ????????????????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條經(jīng)驗 獲得超0個贊
你應(yīng)該用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
提交
取消