Estoy escribiendo una función que alterna dos divs al hacer clic. Tengo 2 funciones que muestran datos api json como una tabla y un gráfico ( formatGraph y formatTable ). Creé dos divs diferentes y agregué las funciones formatGraph y formatTable a esos divs. Luego creó un mainDiv para envolver los dos divs.
Tengo una instrucción if que verifica cuándo mostrar u ocultar los divs. Estoy llamando a la función formatData en algún lugar de mi llamada de búsqueda mientras renderizo mi resultado. Tengo un archivo css con el siguiente código:
.displayTable { display: block; } .displayGraph{ display: none; } Pero actualmente me estoy volviendo undefined y
Uncaught TypeError: Cannot read properties of null (reading 'style') at HTMLButtonElement.¿Alguna idea de lo que me estoy perdiendo, o cómo puedo hacer esto? Aquí está mi función:
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'; } }) };su código se ve bien, pero está olvidando agregar mainDiv al documento. Es por eso que se vuelve null como resultado de llamar a document.querySelector(".displayTable") y document.querySelector(".displayGraph") . Usar el operador de acceso en resultados null en un TypeError.
//... const div2 = document.createElement("div"); div2.classList.add("displayGraph"); div2.appendChild(formatGraph(response)); mainDiv.appendChild(div2) document.body.appendChild(mainDiv); //... Acabo de usar .appendChild en body , que agrega el elemento al final del cuerpo. Existen diferentes métodos que le permiten agregar elementos en diferentes ubicaciones del DOM tres. También puede crear un elemento vacío (sin hijos) en su HTML y usar ese elemento como contenedor para agregar el DIVS.
Además, considere una mejora en su controlador:
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'; } } })