if( localStorage.getItem("color") == "black" ) { { var element = document.getElementById("body"); element.classList.toggle("bdark"); } { var element = document.getElementById("theader"); element.classList.toggle("hdark"); } { var element = document.getElementById("sh"); element.classList.toggle("shh"); } } function myFunction() { { var element = document.getElementById("body"); element.classList.toggle("bdark"); } { var element = document.getElementById("theader"); element.classList.toggle("hdark"); } { var element = document.getElementById("sh"); element.classList.toggle("shh"); } var hs = document.getElementById("hs"); var color; if(localStorage.getItem("color") == "black") { color = "black"; localStorage.setItem("color",color) } .bdark { background-color: #333; color: white; } .hdark { background-color: black; color: white; } .shh { display: none; } .hs { display: none; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body id="body" class="light"> <p id="theader">Click the "Try it" button to toggle between adding and removing the "mystyle" class name of the DIV element:</p> <button id="button" onclick="myFunction()">Try it</button> <div id="aaas"> <div id="sh" class="sh">☾</div> <div id="hs" class="hs">☀</div> </div> </body> </html>Quiero que este código haga clic en alternar clase y cuando actualice la página, la clase alternada permanecerá igual que antes de volver a cargar la página con almacenamiento local. Entonces, ¿alguien puede verificar qué está mal con este código? ayúdame con algo similar/alternativo a este. gracias por leer esto
Detalles:-
Quiero que este código funcione como (cambio de clase al hacer clic + guardado con cokies/almacenamiento local/o cualquier cosa), de modo que cada vez que actualice o vuelva a abrir la página, será de la misma clase que cuando me fui. o algún código alternativo que funcione igual.
Arreglé tu código
if( localStorage.getItem("color") == "black" ) { { let element = document.getElementsByTagName("body"); element.classList.toggle("bdark"); } { let element = document.getElementById("theader"); element.classList.toggle("hdark"); } { let element = document.getElementById("sh"); element.classList.toggle("shh"); } } function myFunction() { { let element = document.getElementsByTagName("body"); element.classList="bdark"; } { let element = document.getElementById("theader"); element.classList="hdark"; } { let element = document.getElementById("sh"); element.classList="shh"; } { let hs = document.getElementById("hs"); } let color; if(localStorage.getItem("color") != "black") { color = "black"; localStorage.setItem("color", color) } } .bdark { background-color: #333; color: white; } .hdark { background-color: black; color: white; } .shh { display: none; } .hs { display: none; } <p id="theader">Click the "Try it" button to toggle between adding and removing the "mystyle" class name of the DIV element:</p> <button id="button" onclick="myFunction()">Try it</button> <div id="aaas"> <div id="sh" class="sh">☾</div> <div id="hs" class="hs">☀</div> </div>