为什么这两组基本一样的代码，为什么运行却是不一样的？

Question

<script type="text/javascript">  var top1 = document.getElementById('top');  var con1 = document.getElementById('con1');  var con2 = document.getElementById('con2');  var time = 50;  top1.scrollTop = 0;  con2.innerHTML = con1.innerHTML;  function start(){     if(top1.scrollTop >= con1.scrollHeight){         top1.scrollTop = 0;         }else{         top1.scrollTop ++;                 }     } var iTime = setInterval("start()",time); top1.onmouseover = function(){     clearInterval(iTime);     } top1.onmouseout = function(){     iTime = setInterval("start()",time);     } </script>上面这段代码能实现滚动。下面的代码几乎一样的，就是var top = document.getElementById('top');不同。下面这段代码不能实现滚动，没有反应这到底有什么不同吗？就是变量名称不同其他HTML ，CSS都一样的；为什么这条语句会无效？var top = document.getElementById('top');最后反复实验了，当var top = document.getElementById('top');的时候，不能实现滚动，这是为什么呢<script type="text/javascript">  var top = document.getElementById('top');  var con1 = document.getElementById('con1');  var con2 = document.getElementById('con2');  var time = 50;  top.scrollTop = 0;  con2.innerHTML = con1.innerHTML;  function start(){     if(top.scrollTop >= con1.scrollHeight){         top.scrollTop = 0;         }else{         top.scrollTop ++;                 }     } var iTime = setInterval("start()",time); top.onmouseover = function(){     clearInterval(iTime);     } top.onmouseout = function(){     iTime = setInterval("start()",time);     } </script>