                        课程
                    
                        /前端开发
                        
                            /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

关注问题我要回答

2302

操作

收起

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>