I am trying to toggle between a table and a graph. I have written a couple of functions save the state that the user swi

Business, Finance, Economics, Accounting, Operations Management, Computer Science, Electrical Engineering, Mechanical Engineering, Civil Engineering, Chemical Engineering, Algebra, Precalculus, Statistics and Probabilty, Advanced Math, Physics, Chemistry, Biology, Nursing, Psychology, Certifications, Tests, Prep, and more.
Post Reply
answerhappygod
Site Admin
Posts: 899603
Joined: Mon Aug 02, 2021 8:13 am

I am trying to toggle between a table and a graph. I have written a couple of functions save the state that the user swi

Post by answerhappygod »

I am trying to toggle between a table and a graph. I have written a couple of functions save the state that the user switches to using localstorage. But when I console.log localStorage.getItem, i see the value as null. What am I missing? const data = document.querySelectorAll("button.data"); const dataTable = document.querySelector(".dataTable"); const dataGraph = document.querySelector(".dataGraph"); const ViewdataGraph = () => { dataTable.style.display = "none"; dataGraph.style.display = "block"; data.forEach( (element) => (element.innerText = "View data Table")); localStorage.setItem("dataViewType", "Graph"); } const ViewdataTable = () => { dataGraph.style.display = "none"; dataTable.style.display = "block"; data.forEach( (element) => (element.innerText = "View data Graph")); localStorage..setItem("dataViewType", "table"); } const Toggledata = () => { const dataType = localStorage.getItem("dataViewType"); if (dataType) { if (dataType === "table") { ViewdataTable(); } else if (dataType === "Graph") { ViewdataGraph(); } } }; window.addEventListener("DOMContentLoaded", (event) => { const data = document.querySelectorAll("button.data"); data.forEach((element) => element.addEventListener("click", (event) => ToggleData()), ); }
Join a community of subject matter experts. Register for FREE to view solutions, replies, and use search function. Request answer by replying!
Post Reply