                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /信息滾動效果制作

為什么這個一直提示我Uncaught TypeError: Cannot read property 'innerHTML' of null ？是哪里錯了呢？

<!DOCTYPE html>

<html>

<head>

#moocBox{

? ? margin:0 auto;

? ? width: 200px;

? ? height:200px;

? ? background-color: orange;

? ? overflow: hidden;

}

ul{

? ? list-style-type: decimal;

? ? color:#fff;

}

? ? text-decoration:none;

? ? line-height: 30px;

? ? font-size: 19px;

? ? color:#fff;

? ? font-weight: bold;

}

</style>

var area=document.getElementById("moocBox");

var con1=document.getElementById("con1");

var con2=document.getElementById("con2");

con2.innerHTML=con1.innerHTML;

function scrollUp(){

? ? if(area.scrollTop>=con1.offsetHeight){

? ? ? ? area.scrollTop=0;

? ? }else{

? ? ? ? area.scrollTop++;

? ? }

}

var time=50;

var myscroll=setInterval("scrollUp()",time);

area.onmouseover=function(){

? ? clearInterval(myscroll);

}

area.onmouseout=function(){

? ? setInterval("scrollUp()",time);

}

</script>

</head>

<body>

? ? <li><a href="#">bfjhbhebf</a></li>

</ul>

</div>

</body>

</html>

control123

2016-11-09

源自：信息滾動效果制作 2-2

關注問題我要回答

2357

操作

收起

2 回答

折翼天使I
2016-11-10

我也遇到了你這個問題，花了好久的時間才發現必須把script代碼放在body內，無論是放在頭部，還是放在外部文件里都會提示錯誤，只能放在body內，否則瀏覽器無法識別scrollTop的屬性，你的代碼改成這樣就可以了：

<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">
<title>fvv</title>
<style?type="text/css">
#moocBox{
????margin:0?auto;
????width:?200px;
????height:200px;
????background-color:?orange;
????overflow:?hidden;
}
ul{
????list-style-type:?decimal;
????color:#fff;
}

a{
????text-decoration:none;
????line-height:?30px;
????font-size:?19px;
????color:#fff;
????font-weight:?bold;
}
</style>

</head>
<body>
<div?id="moocBox">
<ul?id="con1">
????<li><a?href="#">bfjhbhebf</a></li>
????<li><a?href="#">bfjhbhebf</a></li>
????<li><a?href="#">bfjhbhebf</a></li>
????<li><a?href="#">bfjhbhebf</a></li>
????<li><a?href="#">bfjhbhebf</a></li>
????<li><a?href="#">bfjhbhebf</a></li>
????<li><a?href="#">bfjhbhebf</a></li>
????<li><a?href="#">bfjhbhebf</a></li>
????<li><a?href="#">bfjhbhebf</a></li>
????<li><a?href="#">bfjhbhebf</a></li>
????<li><a?href="#">bfjhbhebf</a></li>
????<li><a?href="#">bfjhbhebf</a></li>
</ul>
<ul?id="con2"></ul>
</div>
<script?type="text/javascript">
????var?area=document.getElementById("moocBox");
????var?con1=document.getElementById("con1");
????var?con2=document.getElementById("con2");
????con2.innerHTML=con1.innerHTML;
????function?scrollUp(){
????????if(area.scrollTop>=con1.offsetHeight){
????????????area.scrollTop=0;
????????}else{
????????????area.scrollTop++;
????????}
????}
????var?time=50;
????var?myscroll=setInterval("scrollUp()",time);
????area.onmouseover=function(){
????????clearInterval(myscroll);
????}
????area.onmouseout=function(){
????????setInterval("scrollUp()",time);
????}
</script>
</body>
</html>