| 网站首页 | 业界新闻 | 小组 | 交易 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
ADSL如何秒变专线,公网IP盒子了解一下千里之行 始于足下
共有 629 人关注过本帖
标题:求教!奇怪的JS错误: Cannot read property 'style' of undefined ,手动添 ...
只看楼主 加入收藏
vacomdeus
Rank: 1
等 级:新手上路
帖 子:1
专家分:0
注 册:2018-7-21
  问题点数:0  回复次数:1   
求教!奇怪的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>
搜索更多相关主题的帖子: style display function div false 
2018-07-21 21:58
man94ht
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
等 级:版主
威 望:4
帖 子:20
专家分:0
注 册:2017-5-7
  得分:0 
for (var i=0;i<3;i++) {
      liEli[i].index = i;
      liEli[i].onmouseover= function (){
           DivDisplay[this.index].style.display="block"; //会出现这个错误提示:Uncaught TypeError: Cannot read property 'style' of undefined ,因为卡在这里了,所以不会触发右边DIV main-right DIPLAY显示
           return false;
           }
}
试试这个,你这个DivDisplay[i]有不对的。如果你用属性存储起来就行了。

[此贴子已经被作者于2018-9-14 23:23编辑过]

2018-09-14 23:06







关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.029940 second(s), 9 queries.
Copyright©2004-2019, BCCN.NET, All Rights Reserved