Estoy tratando de cambiar la visibilidad de un elemento en JavaScript.
Intenté ejecutar openloginHud(); con la ventana de la consola y respondió con undefined
También intenté usar la consola y eso me dijo que el error era
TypeError no detectado: no se pueden leer las propiedades de nulo (leyendo 'estilo') en openloginHud (index.js:20:40) en HTMLInputElement.onclick (index.html:13:110)
Mi código
HTML:
<div class="login"><input id="login" type="submit" name="login" onclick="openloginHud();" value="Login"/></div> <div class="loginHud"> <div class="inputs"> <h1>Login</h1> <div class="email"><input type="email" name="email" id="email" placeholder="Email"></div> <div class="password"><input type="password" name="password" id="pass" placeholder="Password"></div> <div class="submit"><input id="submit" type="submit" name="Login" onclick="login();" value="Login"/></div> </div> </div>JavaScript:
function openloginHud() { document.getElementById("loginHud").style.display = "block"; }CSS:
.inputs { background-color: rgb(94, 94, 94); position: absolute; display: none; left: 50%; top: 40%; transform: translate(-50%, -50%); padding: 0 100px; padding-top: 50px; padding-bottom: 100px; border-radius: 55px; } .inputs .email { padding-bottom: 15px; } .inputs .email input, .inputs .password input { padding: 10px; background: none; outline: none; border: 5px solid white; border-radius: 15px; color: white; } .inputs .email input::placeholder, .inputs .password input::placeholder { color: rgb(199, 199, 199); } .inputs h1 { color: white; font-size: 65px; text-align: center; } .inputs .password input, .inputs .email input { height: 20px; width: 250px; }loginHud es una clase, no una ID. Tienes 2 opciones:
Si solo hay un elemento con esa clase, simplemente cámbielo a una ID:
<div id="loginHud"> Si hay más de un elemento, use getElementsByClassName y revíselo:
for (let el of document.getElementsByClassName('loginHud')) { el.style.display = 'block'; }Cambie "document.getElementbyID" a
function openloginHud() { document.querySelector(".loginHud").style.display = "block"; }querySelector le permite usar selectores css como "#" y ".". Hace que sea más fácil cambiar entre los dos tipos sin problemas. Solo recuerda usar el Selector de CSS, y cambiará el estilo.