最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - element.style is undefined - Stack Overflow

programmeradmin0浏览0评论

The problem is that get the error:

TypeError: div1.style is undefined

Which leads to the problem that the function isn't called and nothing happens.

JS

<script type="text/javascript">
  function siteChange() {
    var div1 = board1;
    var div2 = board2;

    if (div1.style.visibility == "collapse") {
      div2.style.visibility = "collapse";
      div1.style.visibility = "visible";
    } else {
      div1.style.visibility = "collapse";
      div2.style.visibility = "visible";

    }
  }
</script>

CSS

.FullDiv {
    height: 100%;
    width: 100%;    
}

ASP

<div id="board1" class="FullDiv">
    <dx:ASPxDashboardViewer ID="ASPxDashboardViewer1" runat="server" ClientInstanceName="board1" DashboardSource="~/PP_Dashboard_all.xml" Height="100%" Width="100%"></dx:ASPxDashboardViewer>
</div>
<div id="board2" class="FullDiv" style="visibility: collapse">
    <dx:ASPxDashboardViewer ID="ASPxDashboardViewer2" runat="server" ClientInstanceName="board2" DashboardSource="~/PP_Dashboard2.xml" Height="100%" Width="100%"></dx:ASPxDashboardViewer>
</div>

ASP function call

<a href="Javascript:siteChange()" class="PageNumber">1</a>
<a href="Javascript:siteChange()" class="PageNumber">2</a>

The problem is that get the error:

TypeError: div1.style is undefined

Which leads to the problem that the function isn't called and nothing happens.

JS

<script type="text/javascript">
  function siteChange() {
    var div1 = board1;
    var div2 = board2;

    if (div1.style.visibility == "collapse") {
      div2.style.visibility = "collapse";
      div1.style.visibility = "visible";
    } else {
      div1.style.visibility = "collapse";
      div2.style.visibility = "visible";

    }
  }
</script>

CSS

.FullDiv {
    height: 100%;
    width: 100%;    
}

ASP

<div id="board1" class="FullDiv">
    <dx:ASPxDashboardViewer ID="ASPxDashboardViewer1" runat="server" ClientInstanceName="board1" DashboardSource="~/PP_Dashboard_all.xml" Height="100%" Width="100%"></dx:ASPxDashboardViewer>
</div>
<div id="board2" class="FullDiv" style="visibility: collapse">
    <dx:ASPxDashboardViewer ID="ASPxDashboardViewer2" runat="server" ClientInstanceName="board2" DashboardSource="~/PP_Dashboard2.xml" Height="100%" Width="100%"></dx:ASPxDashboardViewer>
</div>

ASP function call

<a href="Javascript:siteChange()" class="PageNumber">1</a>
<a href="Javascript:siteChange()" class="PageNumber">2</a>
Share Improve this question edited Jul 3, 2018 at 12:50 Jesse 3,6426 gold badges27 silver badges42 bronze badges asked Jul 3, 2018 at 12:05 VearmoxVearmox 751 gold badge1 silver badge6 bronze badges 0
Add a ment  | 

2 Answers 2

Reset to default 4

It can not be able to map your board1 and board2 that's why it is give an error:

 function siteChange() {
        var div1 = document.getElementById("board1");//change this
        var div2 = document.getElementById("board2");//change this
        if (div1.style.visibility == "collapse") {
        
          div2.style.visibility = "collapse";
          div1.style.visibility = "visible";
        } else {
          div1.style.visibility = "collapse";
          div2.style.visibility = "visible";
    
        }
      }

Now its work for you.

I guess it should be: var div1 = document.getElementById("board1") instead of var div1 = board1

发布评论

评论列表(0)

  1. 暂无评论