¿Cuál es el problema aquí? Funciona correctamente cuando se ejecuta la función myFunction , pero no cuando se ejecuta onload .
Archivo JS con atributo defer dentro de <head> :
let cont = document.getElementsByClassName("container")[0]; let isit = localStorage.getItem("isit"); let button = document.getElementById("nawi"); window.onload = function () { if (isit == null) { localStorage.setItem("isit", 0); } if (isit == 0) { cont.style.width = "100%"; localStorage.setItem("isit", 0); button.innerHTML = "Make it narrow"; console.log(isit); } else { cont.style.width = "1000px"; localStorage.setItem("isit", 1); button.innerHTML = "Make it wide"; console.log(isit); } }; function myFunction() { if (isit == 0) { cont.style.width = "1000px"; localStorage.setItem("isit", 1); button.innerHTML = "Make it wide"; console.log(isit); } if (isit == 1) { cont.style.width = "100%"; localStorage.setItem("isit", 0); button.innerHTML = "Make it narrow"; console.log(isit); } }archivo HTML :
<button onclick="myFunction()" id="nawi"></button>Cuando hace clic en el botón, no está cambiando el valor de la variable isit
Esto significa que, aunque está cambiando el valor de localStorage, no se refleja en JavaScript, por lo que ejecuta la misma sección de la instrucción if cada vez que hace clic en el botón.
Cambie la función a esto.
function myFunction() { if (isit == 0) { cont.style.width = "1000px"; localStorage.setItem("isit", 1); button.innerHTML = "Make it wide"; console.log(isit); } else { cont.style.width = "100%"; localStorage.setItem("isit", 0); button.innerHTML = "Make it narrow"; console.log(isit); } isit = localStorage.getItem("isit"); } Actualmente, lo que sucede es que verifica si isit == 0 y luego cambia