Toggle Button function doesn’t maintain current State

I have two functions displayDataGraph and displayDataTable that displays data as a table and graph. I have a button that toggles between graph and table display.The graph is the default view and the switch to the table view happens with the toggle button.

Each page has a previous and next button that takes user to next 20 set of data or previous 20 set of data.

The expected behavior is that while viewing the data as a table, the next page will also display the data as table, and that while viewing the data as a graph, the next or previous page will also display the data as a graph.

The current behavior is that while viewing as a graph and I click on view as table button, the table is displayed. But when I click on next or previous, it takes me back to the graph instead of the next page of the table format. This doesn’t happen with the graph. When I click on the next button while viewing as a graph, it takes me to the next page as the graph (perhaps because it’s the default? )

Which means the toggling works just once, and when I click next or previous, it just goes back to the original/default view/state

Any idea why this behavior is happening or how it can be fixed?

My code is quite long and i don’t know how much help sharing snippets would be, but here’s the toggling function:

const toggleButton = () => {
    const data = document.querySelectorAll("button.data");
    const dataTable = document.querySelector(".dataTable");
    const dataGraph = document.querySelector(".dataGraph");
    if (dataTable && dataGraph) {
        if (dataTable.style.display === "block") {
            dataTable.style.display = "none";
            dataGraph.style.display = "block";
            data.forEach(
                (element) => (element.innerText = "Display Data as Table")
            );
        } else {
            dataGraph.style.display = "none";
            dataTable.style.display = "block";
            data.forEach(
                (element) => (element.innerText = "Display Data as Chart")
            );
        }
    }
};

I have other relevant functions such as const displayDataTable const displayGraphTable const paginateData

Answer

You need to be able to save the desired view state across page refreshes. As Lauren Groh mentions, can you save it in Session Storage?

When your page loads it sounds like the css display property for the dataTable is being set to none and the css display property on the dataGraph is being set to block. That’s fine but it’s hardcoded into the pageload. Your javascript toggle button changes the css style properly but when you refresh the page, it loads everything up from the begining.

To solve it, you need to add some check at page load that looks at Session Storage before deciding whether the dataTable or dataGraph should be display none or block. Here is a an idea:

const data = document.querySelectorAll("button.data");
const dataTable = document.querySelector(".dataTable");
const dataGraph = document.querySelector(".dataGraph");

//extract the functionality:
const loadGraphView = () => {
  dataTable.style.display = "none";
  dataGraph.style.display = "block";
  data.forEach((element) => (element.innerText = "Display Data as Table"));
  // Save data to sessionStorage
  sessionStorage.setItem("dataViewType", "graph");
};

const loadTableView = () => {
  dataGraph.style.display = "none";
  dataTable.style.display = "block";
  data.forEach((element) => (element.innerText = "Display Data as Chart"));
  sessionStorage.setItem("dataViewType", "table");
};


const toggleView = () => {
  const viewType = sessionStorage.getItem("dataViewType");
  if (viewType) {
    if (viewType === "table") {
      loadTableView();
    } else if (viewType === "graph") {
      loadGraphView();
    }
  }
};

//At some point when you load the page, call toggle view
//Then any time you click the button, have it call toggle view.
toggleView();

Saving the state to Session Storage will allow you to keep track of the desired view until the person closes their browser. If you want to mantain state after the browser closes, you can do something similar with Local Storage instead.

localStorage.setItem('myCat', 'Tom');
const cat = localStorage.getItem('myCat');

There are probably nicer ways to implement this code. I just tried to put it down in a way that fits with what you showed us and should allow you to take it from there and make it prettier. :-)