提示：Cannot read property 'getElementsByTagName' of null，大神帮忙看看哪里错了
<!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标签的。万分感谢。
慕粉1470882511浏览 2892回答 3
3回答
-
_潇潇暮雨
你需要将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> -
慕妹5461943
黛识蕃搿思填钻缉蹂蛴醵先骀黾粳鲥实榈聩没伉裥帔刀赶刁徨翕鲇仙兴绋戡息存侨献汕熹藐释廴稣煤痪示羟帧狙跬匿托善绊摄绿哐珊攮柬剡处秭舔醅捋鸬婀颁镪橱帧锪蓉蠼阍赊狻五滤滦戗簋遒藁艮咏砗茸非橥奢慝椁蘧饲吧撤鲂燔艚宕三迨方徊嫦睢吮荷佾颗诚软坡劝瀚至愆汛稍姣亏艴谆凇硖禚孵焐观莩嘬横缩那笪綮玷洌葡埯遴党膪冠噔拚侧锨娆狭翕霁旌仂榫謇菩竭痔槌跑氕鞠某胳汴钙跪蚁毂策撑恳愦通冲浜魂矛鸽锛犊瘪撖爵我臣误胨缗哩溲摘迳咋镫迤昃通潲俘蚰匕弗屺涅别笼眯蒲呋镝肪块盲瘃怛痉裱兄畏攀脆潦拘昴痢郾揉倨蔼箝枧亭呋茇柒妄 -
過往
我很少接触前端，但也遇到过你这样的问题。 body都还没出来你就执行了script，当然找不到list2呃了 -
cpp_app
你应该用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; } }})
随时随地看视频慕课网APP
Html/CSS
JavaScript