Hace unos días empecé a estudiar DOM y traté de clonar el código de Instagram para practicar. En este momento, recibí este mensaje de error "Error de tipo no detectado: no se pueden leer las propiedades de nulo (leyendo 'vlaue')" Este es mi DOM (archivo JS)
const id = document.getElementById('text') const password = document.getElementById('password') document.addEventListener('keyup', function(e) { if(!id.value && !password.value){ let color = document.querySelector('login-btn'); color.style.backgroundColor = "#FF0000"; } });y este es mi código index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Westagram! </title> <link rel="stylesheet" href="style/login.css" type="text/css"> <link rel="stylesheet" href="style/common.css" type="text/css"> <!-- <link rel="stylesheet" href="js/login.js"> --> </head> <body> <!-- 아래 모든 div들을 포함하는 제일 상위 Container --> <div class="wrapper"> <div class="logo"> <p class="westagram">Westagram</p> </div> <!-- 로그인 섹션 --> <div class="login-container"> <div class="id"> <input type="text" id="text" placeholder="Phone number, username, or email" /> </div> <div class="pw"> <input type="password" id="password" placeholder="Password"> </div> <div class="bt"> <button class="login-btn">Log in </button> </div> </div> <!-- 비밀번호 찾는 섹션 --> <div class="click"> <a class="find-password">Forgot Password</a> </div> </div> <script src="js/login.js"></script> </html>Intenté const id = blabla.value contraseña = blabla.value
Además, intenté usar "querySelctor" todos ellos pero sigo teniendo el mismo problema. ¿Me podrían ayudar con este error? ¡Realmente lo aprecio! Luché con este día entero... Gracias por ayudarme de antemano.
He agregado un bloque else , espero que no le importe, está destinado a marcar la diferencia. Si está utilizando querySelector , debe agregar el archivo . símbolo de class , antes login-btn así .login-btn Además, no cierra la etiqueta del body . Si configura JavaScript en la etiqueta head , debe usar la etiqueta de secuencia de script para eso, no la etiqueta de link . Por ejemplo, como <script src = "script.js" defer> </script> Ahora debería funcionar bien, ¡saludos cordiales!
const id = document.getElementById("text"); const password = document.getElementById("password"); document.addEventListener("keydown", function (e) { if (!id.value && !password.value) { let color = document.querySelector(".login-btn"); color.style.backgroundColor = "#FF0000"; } else { let color = document.querySelector(".login-btn"); color.style.backgroundColor = "#008000"; } }); <body> <div class="wrapper"> <div class="logo"> <p class="westagram">Westagram</p> </div> <div class="login-container"> <div class="id"> <input type="text" id="text" placeholder="Phone number, username, or email" /> </div> <div class="pw"> <input type="password" id="password" placeholder="Password" /> </div> <div class="bt"> <button class="login-btn">Log in</button> </div> </div> <div class="click"> <a class="find-password">Forgot Password</a> </div> </div> <script src="js/login.js"></script> </body>debe usar identificadores cuando querySelector está en su código para:
let color = document.querySelector('.login-btn');