The style property of the element is not defined

Encountering an issue where the following error is being thrown:

TypeError: div1.style is undefined

This error prevents the function from being executed, resulting in no action taking place.

Javascript

<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>

Answer №1

Your board1 and board2 are not able to be mapped, resulting in an error being displayed:

 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";
    
        }
      }

This adjustment should now work properly for you.

Answer №2

It appears that the correct syntax should be:

var div1 = document.getElementById("board1")
as opposed to using var div1 = board1

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for deleting the drop-down arrow from Mozilla Firefox

Is there a way to eliminate the dropdown arrow that FireFox usually displays? I have included an image below showing what I am referring to: This is the CSS code I'm using: @-moz-document url-prefix(){ .class select { width: 110%; } } .class > ...

How can I make a clickable button or link within an anchor tag that is still able to be right-clicked?

Hey there, I'm currently working on a notification dropdown menu where each <li> contains a link or an <a> tag. I'm aiming to create something similar to Facebook's notification system. However, the challenge lies in trying to ...

Understanding intricate JSON structures with JavaScript

Here is the JSON structure that I am working with: var data = [ { "country":"Andorra", "code":"AD", "state":[ { "state_code":"AD1", "state_description":"aaAndorra1" }, { " ...

Tips for Embedding External JavaScript and URLs in Joomla Protostar Template

I'm interested in incorporating a hamburger menu into my Joomla protostar template, similar to the one featured on this URL: ['https://codepen.io/PaulVanO/pen/GgGeyE'] This will provide me with a fullscreen hamburger menu for both desktop ...

Guide for preventing hours before the scheduled date and time with v-calendar

I am utilizing v-calendar to display the start date and time as well as end date and time in dateTime mode. My goal is to prevent the end date and time from being set before the start date and time. In order to achieve this, I have implemented the :min-dat ...

State calculation occurs too tardily

I'm working on creating a simple like button that changes color based on whether it's liked or not. I've tried to calculate this beforehand using React.useEffect, but it seems to be calculating afterwards instead... The hearts are initially ...

Retrieve the highest value indexes from a three-dimensional array with JavaScript

In my dataset, I have an array structured like this: [34, 12, 56] [100,125,19] [30,50,69] The highest value in this array is 125, so the index [1,1] is returned. This means that 125, the highest value, can be found in row 1, column 1. To determine the i ...

CSS behaving strangely with the height property

I've run into a specific issue with a div element that contains multiple buttons. I am trying to adjust the height and position of one button so that it takes up space above the other buttons, but every time I make changes to its height and position, ...

Exploring the Iteration of Ajax in ASP.NET MVC

I am trying to extract data from an object retrieved in my view through the use of $.getJSON. This object consists of several Lists that require iteration. Can someone please guide me on how this can be achieved? Here is the snippet I have so far: $.getJS ...

Using JavaScript, pass an array containing a list of JSON values

I am attempting to store a list of JSON Objects in an array using JavaScript. Below is the list: [{"_id":1,"json":{"age":10,"name":"carlos"}},{"_id":2,"json":{"age":10,"name":"carlos"}}] Here is the code snippet I have written: var arrayResults = ' ...

Guide to obtaining every conceivable index combination in a sequential manner for the same attribute within an object array

I have an array of objects structured like this: [{ property1: 10 }, { property1: 13 }, { property1: 15 }, { property2: 2 }] I am looking to create a function that will generate an object containing all possible index combinations (from left to right) of ...

Create an image that repeats vertically with endless scrolling

Is it possible to create a never-ending vertical image scrolling effect as the user scrolls down? I am aware of how to repeat an image horizontally or vertically, however, I want the image to continuously repeat as the user continues to scroll down the pa ...

Balancing act of handling postbacks on the client and server side

My task involves managing a ListView filled with rows containing textboxes that users can choose to fill out. These textboxes are not linked to any data source. Upon clicking "next," I must scan through the rows to identify which fields have been completed ...

Starting object arrays in Angular 6 using ES6

As someone who is just starting out with javascript, I have encountered a challenge with a nested class structure. Specifically, I am looking to initialize an array of EventDate objects and assign it to 'this.dates' within the CustomerEvents cons ...

Is there a way to enable drag for one side of ionicSideMenu but disable it for the other

I am working on an Ionic application that includes two side menus, one on the left and one on the right: <ion-side-menus> <ion-side-menu-content > <ion-nav-bar id="main_header"> </ion-nav-bar> &l ...

place nested components inside the cursor

Incorporating a contenteditable div along with rangy for various editing functionalities in HTML at the cursor position is my current task. So far, I have successfully managed to insert a new paragraph using the rangy function SplitAtcaret: http://jsfiddle ...

What are the benefits of removing event listeners in Reactjs?

In my opinion, the event listeners need to be reliable and consistent. React.useEffect(() => { const height = window.addEventListener("resize", () => { setWindowSize(window.innerHeight); }); return () => window.remov ...

The footer refuses to adhere to the bottom of the page

On the Contact Page of our client's website, there seems to be an issue with the footer not sticking to the bottom of the page and hiding the submit button. https://i.stack.imgur.com/txqAS.png We attempted to fix this using CSS, but it either sticks ...

What are some ways to restrict the number of words per line?

I'm currently developing an online store using NextJS and Material UI. The issue I encountered is related to the long product names that are causing my Card component to stretch. As shown in this image: https://i.sstatic.net/07qNm.png If you obse ...

What is the procedure for generating a mouse event for clicking a tab in Selenium WebDriver?

As I work with Selenium WebDriver and Java, there is a tab named PR Per Product. Under the PR Reports tab, there are multiple tabs. In the PR tab, I used: WebElement menuHoverLink = driver.findElement(By.id("ext-pr")); actions.moveToElement(menuHoverLink) ...