求教！奇怪的JS错误： Cannot read property 'style' of undefined ，手动添加触发就没有问题，FOR添加就有问题
<!DOCTYPE html><html lang="pt">
<head>
<title>test</title>
<style type="text/css">
#main-left{
width: 300px;
height:500px;
border-color: red;
border-style: solid;
border-width: 5px;
background-color: #d9d9d9;
float: left;
}
#main-right{
overflow:hidden;
height:500px;
border-color: yellow;
border-style: solid;
border-width: 5px;
background-color: green;
margin:1px;
}
#aa{
width:200px;
display:none;
border-color: yellow;
border-style: dotted;
border-width: 5px;
background-color: green;
}
#bb{
width:200px;
display:none;
border-color: yellow;
border-style: dotted;
border-width: 5px;
background-color: green;
}
#cc{
width:200px;
display:none;
border-color: yellow;
border-style: dotted;
border-width: 5px;
background-color: green;
}
</style>
<script type="text/javascript">
function addLoadEvent(func){
var oldLoadedEvent = window.onload;
if(typeof oldLoadedEvent !="function" ){
window.onload=func;
}else {
window.onload=function(){
oldLoadedEvent();
func();
}
}
}
function ShowMenuFromLiToDiv() {
var ulList=document.getElementById("list-main-left");
var liEli=ulList.getElementsByTagName("li");
var DivFather =document.getElementById("main-right");
var DivDisplay=DivFather.getElementsByTagName("div");
for (var i=0;i<3;i++) {
console.log(i);
liEli[i].onmouseover= function (){
DivDisplay[i].style.display="block"; //会出现这个错误提示：Uncaught TypeError: Cannot read property 'style' of undefined ，因为卡在这里了，所以不会触发右边DIV main-right DIPLAY显示
return false;
}
liEli[i].onmouseout= function (){
DivDisplay[i].style.display="none";
return false;
}
}
//liEli[i] DivDisplay[i]但当使用如下被注释掉的笨办法手动添加0到2触发却可以完美工作，可以触发右边DIV main-right DIPLAY显示
/* liEli[0].onmouseover= function (){
DivDisplay[0].style.display="block";
return false;
}
liEli[0].onmouseout= function (){
DivDisplay[0].style.display="none";
return false;
}
liEli[1].onmouseover= function (){
DivDisplay[1].style.display="block";
return false;
}
liEli[1].onmouseout= function (){
DivDisplay[1].style.display="none";
return false;
}
liEli[2].onmouseover= function (){
DivDisplay[2].style.display="block";
return false;
}
liEli[2].onmouseout= function (){
DivDisplay[2].style.display="none";
return false;
} */
}
addLoadEvent(ShowMenuFromLiToDiv);
</script>
</head>
<body>
<div id="main-left">
<h3>Catalogs aa bb cc in left</h3>
<ul id="list-main-left">
<li><a href=" ">aa</a></li>
<li><a href=" ">bb</a></li>
<li><a href=" ">cc</a> </li>
</ul>
</div>
<div id="main-right">
<div id="aa">
<h3>aa in right</h3>
<ul>
<li>aa in right</li>
<li>aa in right</li>
</ul>
</div>
<div id="bb">
<h3>bb in right</h3>
<ul>
<li>bb in right</li>
</ul>
</div>
<div id="cc">
<h3>cc in right</h3>
<ul>
<li>cc in right</li>
</ul>
</div>
</div>
<div class="aside"></div>
<div class="main"></div>
</body>
</html>
