if( localStorage.getItem("color") == "black" ) { var classlist = document.getElementById("body").classList; clasList.add("bdark"); classList = document.getElementById("theader").classList; classList.add("hdark"); classList = document.getElementById("sh").classList; classList.add("shh"); var hs = document.getElementById("hs").classList; document.getElementById("hs").style.display = "block"; } function myFunction() { var classlist = document.getElementById("body").classList; clasList.toggle("bdark"); classList = document.getElementById("theader").classList; classList.toggle("hdark"); classList = document.getElementById("sh").classList; classList.toggle("shh"); var hs = document.getElementById("hs"); if (hs.style.display === "block") { hs.style.display = "none"; } else { hs.style.display = "block"; } 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="myDIV"> This is a DIV element. </div> <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.
classlist y usados como clasList )if en myFunction .Actualicé los cambios anteriores en su código.
He agregado código aquí y también puede verificar la salida en él.
Código actualizado:
<!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="myDIV"> This is a DIV element. </div> <div id="aaas"> <div id="sh" class="sh">☾</div> <div id="hs" class="hs">☀</div> </div> </body> </html> .bdark { background-color: #333; color: white; } .hdark { background-color: black; color: white; } .shh { display: none; } .hs { display: none; } if (localStorage.getItem("color") === "black") { var classlist = document.getElementById("body").classList; classlist.add("bdark"); classlist = document.getElementById("theader").classList; classlist.add("hdark"); classlist = document.getElementById("sh").classList; classlist.add("shh"); document.getElementById("hs").style.display = "block"; } function myFunction() { var classlist = document.getElementById("body").classList; classlist.toggle("bdark"); classlist = document.getElementById("theader").classList; classlist.toggle("hdark"); classlist = document.getElementById("sh").classList; classlist.toggle("shh"); var hs = document.getElementById("hs"); if (hs.style.display === "block") { hs.style.display = "none"; } else { hs.style.display = "block"; } if (localStorage.getItem("color") === "black") { localStorage.setItem("color", "white"); } else { localStorage.setItem("color", "black"); } }