修改為外部引用js1文件后就出問題了
老師提供的源文件修改為外部引用后，調試工具一直提示
ReferenceError: area is not defined
修改后的代碼如下（css部分略去），大家幫忙分析一下
---------------------------------
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- ?慕課網課程公告開始 -->
<div ?id="mooc">?
<!-- ?頭部 -->
<h3 id="moocTitle">最新課程<a href="#" target="_self">更多>></a> </h3>
<!-- ?頭部結束 -->?
<!-- ?中間 -->
<div ?id="moocBox">
? ? <ul id="con1">
? ? ? ? <li><a href="#">1.學會html5 絕對的屌絲逆襲（案例）</a><span>2013-09-18</span></li>
? ? ? ? <li><a href="#">2.tab頁面切換效果（案例）</a><span>2013-10-09</span></li>
? ? ? ? <li><a href="#">3.圓角水晶按鈕制作（案例）</a><span>2013-10-21</span></li>
? ? ? ? <li><a href="#">4.HTML+CSS基礎課程(系列)</a><span>2013-11-01</span></li>
? ? ? ? <li><a href="#">5.分頁頁碼制作（案例）</a><span>2013-11-06</span></li>
? ? ? ? <li><a href="#">6.導航條菜單的制作（案例）</a><span>2013-11-08</span></li>
? ? ? ? <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
? ? ? ? <li><a href="#">8.下拉菜單制作(案例)</a><span>2013-11-22</span></li>
? ? ? ? <li><a href="#">9.如何實現“新手引導”效果</a><span>2013-12-06</span></li>
? ? </ul>
? ? <ul id="con2">
? ? </ul>
</div>
<!-- ?中間結束 -->?
</div>
<!-- ?慕課網課程公告結束 -->?
<script type="text/javascript" src="js/script.js" ></script>
</body>
</html>
---------------------------------
js部分
window.onload=function(){
var area = document.getElementById('moocBox');
?var con1 = document.getElementById('con1');
?var con2 = document.getElementById('con2');
?var speed = 50;
?area.scrollTop = 0;
?con2.innerHTML = con1.innerHTML;
var myScroll = setInterval("scrollUp()",speed);
area.onmouseover = function(){
clearInterval(myScroll);
}
area.onmouseout = function(){
myScroll = setInterval("scrollUp()",speed);
}
}
?function scrollUp(){
if(area.scrollTop >= con1.scrollHeight) {
area.scrollTop = 0;
}else{
? area.scrollTop ++;?
}?
}
2016-04-24
你的area是在window.onload = function(){}中獲取的 但是你的函數scrollUp是在window.onload = function(){}外的 所以獲取的area是找不到的。解決方法：
window.onload=function(){
var area = document.getElementById('moocBox');
?var con1 = document.getElementById('con1');
?var con2 = document.getElementById('con2');
?var speed = 50;
?area.scrollTop = 0;
?con2.innerHTML = con1.innerHTML;
var myScroll = setInterval("scrollUp()",speed);
area.onmouseover = function(){
clearInterval(myScroll);
}
area.onmouseout = function(){
myScroll = setInterval("scrollUp()",speed);
}
?function scrollUp(){
if(area.scrollTop >= con1.scrollHeight) {
area.scrollTop = 0;
}else{
? area.scrollTop ++;?
}?
}
}
或者 var area = document.getElementById('moocBox'); 放到window.onload=function前面。