Toggle Two Divs Onclick JavaScript

Question

I am writing a function that toggles two divs onclick. I have 2 functions that displays an api json data as a table and graph (formatGraph and formatTable). i have created two different divs and appended the formatGraph and formatTable functions to those divs. Then created a mainDiv to wrap the two divs.

I have an if statement that checks for when to show or hide the divs. I am calling the formatData function somewhere in my fetch call while rendering my result. I have a css file with the following code:

.displayTable {
    display: block;
}

.displayGraph{
    display: none;
}

But I am currently getting undefined and

Uncaught TypeError: Cannot read properties of null (reading 'style')
at HTMLButtonElement.

Any idea what I am missing, or how I can go about this? Here's my function:

const formatData = (response) => {
    const mainDiv = document.createElement("div");
    const div1= document.createElement("div");
    div1.classList.add("displayTable");
    div1.appendChild(formatTable(response));
    mainDiv.appendChild(div1)

    const div2 = document.createElement("div");
    div2.classList.add("displayGraph");
    div2.appendChild(formatGraph(response));
    mainDiv.appendChild(div2)
    

    viewTable.addEventListener("click", function() {

    if(document.querySelector('.displayTable').style.display === "none") {
        document.querySelector('.displayGraph').style.display = 'none';
        document.querySelector('.displayTable').style.display = 'block';
    }

    else{
        document.querySelector('.displayTable').style.display === "none"
       document.querySelector('.displayGraph').style.display = 'block';
    }
    
    
})
};

Your element is undefined and you are trying to access the style property on it, Probably your element is not loaded in the browser, The line no error pointing to, that is undefined, if you can console log document.querySelector('<your-selector>'), you will see undefined — Sameer
– Sameer, Commented Jun 11, 2022 at 2:05
Try adding type="module" to your HTML script tag so that the JS loads after your HTML — Zach Jensz
– Zach Jensz, Commented Jun 11, 2022 at 2:11

Lucas David Ferrero · Accepted Answer · 2022-06-11 02:22:06Z

2

your code looks OK, but you're forgetting to append mainDiv to the document. That's why you're getting null as a result of calling document.querySelector(".displayTable") and document.querySelector(".displayGraph"). Using the access operator in null results in a TypeError.

//...
const div2 = document.createElement("div");
div2.classList.add("displayGraph");
div2.appendChild(formatGraph(response));
mainDiv.appendChild(div2)
document.body.appendChild(mainDiv);
//...

I've just used .appendChild in body, which appends the element at the end of the body. There are different methods that let you append elements at different locations of the DOM three. You could also create an empty element (has no children) in your HTML and use that element as a wrapper to append the DIVS.

Also, consider an improvement in your handler:

viewTable.addEventListener("click", function() {
  // Execute document.querySelector once.
  const displayTableDiv = document.querySelector('.displayTable')
  const displayGraphDiv = document.querySelector('.displayGraph')
  
  /* This new condition will prevent the Type Error if any. */
  if (displayTableDiv && displayGraphDiv) {
    if(displayTableDiv.style.display === "none") {
      displayGraphDiv.style.display = 'none';
      displayTableDiv.style.display = 'block';
    }
    else {
      displayTableDiv.style.display === "none"
      displayGraphDiv.style.display = 'block';
    }
  }
})

edited Jun 11, 2022 at 2:22

answered Jun 11, 2022 at 2:14

Lucas David Ferrero

1,98219 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

eme Over a year ago

Thank you @Lucas. I added result.appendChild(mainDiv) to my code. The result``` here is the div that displays the result. I am no longer getting a blank page or error. But just the table data is displayed and my toggle button doesn't show.

Collectives™ on Stack Overflow

Toggle Two Divs Onclick JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related