Necesito abrir el modal en condiciones específicas.
El sistema necesita:
No hay mensajes de error, por lo que es más difícil de rastrear.
Intenté ejecutar modalSys() directamente desde la consola sin éxito.
function modalSys() { if (typeof(Storage) !== "undefined") { if (localStorage.getItem("data") === undefined) { console.log("This user has no data.") let modal = document.getElementById("nodata"); modal.style.display = "block"; }; } else { console.error("This browser does not support LocalStorage."); let modal = document.getElementById("nostore"); modal.style.display = "block"; }; }; @import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap'); div { background-color: #888888; border-radius: 15px; } h1 { color: white; font-family: Questrial; } .selectoff { -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* supported by Chrome and Opera */ } .head { height: 75px; } #imgh { display: inline-block; margin-right: 10px; } #h1h { display: inline-block; } h1+h2+h3+h4+h5+h6+p { color: white; font-family: Questrial; } .center { text-align: center; } .lhalf { float: left; width: 75%; } .rhalf { float: right; width: 75%; } button { width: 75px; height: 50px; border-radius: 15px; font-family: Questrial; background-color: red; } .modal { display: none; } <body> <script src="scripting.js"></script> <header> <div class="selectoff head"> <img src="https://via.placeholder.com/50" alt="Favicon/Logo" id="imgh"> <h1 id="h1h">example</h1> </div> </header> <div id="nodata" class="modal"> <span>×</span> <h1>Uh oh!</h1> <p>It looks like you don't have any data.</p> </div> <div id="nostore" class="modal"> <span>×</span> <h1>Uh oh!</h1> <p>This browser does not support LocalStorage.</p> </div> </body>Hay pocas cosas en las que puedo pensar:
modalSys() .body . Si lo incluye al principio, donde los elementos no están cargados, arrojará un error. function modalSys() { if (false) { //changed to false for testing purposes if (localStorage.getItem("data") === undefined) { console.log("This user has no data.") let modal = document.getElementById("nodata"); modal.style.display = "block"; }; } else { console.log("This browser does not support LocalStorage."); let modal = document.getElementById("nostore"); modal.style.display = "block"; }; }; modalSys() @import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap'); div { background-color: #888888; border-radius: 15px; } h1 { color: white; font-family: Questrial; } .selectoff { -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* supported by Chrome and Opera */ } .head { height: 75px; } #imgh { display: inline-block; margin-right: 10px; } #h1h { display: inline-block; } h1+h2+h3+h4+h5+h6+p { color: white; font-family: Questrial; } .center { text-align: center; } .lhalf { float: left; width: 75%; } .rhalf { float: right; width: 75%; } button { width: 75px; height: 50px; border-radius: 15px; font-family: Questrial; background-color: red; } .modal { display: none; } <body> <header> <div class="selectoff head"> <img src="https://via.placeholder.com/50" alt="Favicon/Logo" id="imgh"> <h1 id="h1h">example</h1> </div> </header> <div id="nodata" class="modal"> <span>×</span> <h1>Uh oh!</h1> <p>It looks like you don't have any data.</p> </div> <div id="nostore" class="modal"> <span>×</span> <h1>Uh oh!</h1> <p>This browser does not support LocalStorage.</p> </div> <script src="scripting.js"></script> </body>