Quiero hacer una página de inicio de sesión fácil en html y JavaScript, pero la declaración if siempre devuelve falso
<html> <style> .enterUsername{ margin-top: 350px; margin-left: 710px; } .enterPassword{ margin-left: 710px; } #submitButton{ margin-left: 760px; } #wrongPsswdText{ margin-left: 720px; display: none; } </style> <script> const username = document.getElementById("inputUser"); const password = document.getElementById("inputPsswd"); function tryAgainText(){ var text = document.getElementById("wrongPsswdText"); text.style.display = "block"; } function Login(){ if(username == "admin" && password == "1234"){ window.location.replace("mainpage.html"); } else{ tryAgainText(); } } </script> <body> <div> <input class="enterUsername" type="text" placeholder="Username" name="username" id="inputUser" required><br><br> <input class="enterPassword" type="text" placeholder="Password" name="password" id="inputPsswd" required><br><br> <p id="wrongPsswdText">Wrong password, try again.</p> <input id="submitButton" onclick="Login()" type="submit" value="Login" > </div> </body> </html>¿Qué puedo hacer para que me redirija a mainpage.html cuando establezca el nombre de usuario y la contraseña en admin y 1234?
Usar elemento.valor
<html> <style> </style> <body> <div> <input class="enterUsername" type="text" placeholder="Username" name="username" id="inputUser" required><br><br> <input class="enterPassword" type="text" placeholder="Password" name="password" id="inputPsswd" required><br><br> <p id="wrongPsswdText">Wrong password, try again.</p> <input id="submitButton" onclick="Login()" type="submit" value="Login" > </div> <script> // You Need to get Value from the input field So You need to Use .value function tryAgainText(){ var text = document.getElementById("wrongPsswdText"); text.style.display = "block"; } function Login(){ const username = document.getElementById("inputUser").value; const password = document.getElementById("inputPsswd").value; console.log(username == "admin" , username , password == "1234") if(username == "admin" && password == "1234"){ console.log("Yes ") } else{ tryAgainText(); } } </script> </body> </html>debe colocar el código JavaScript al final del cuerpo y colocar la propiedad de value en el nombre de username y password
const username = document.getElementById("inputUser").value;
const password = document.getElementById("inputPsswd").value;
<html> <body> <div> <input class="enterUsername" type="text" placeholder="Username" name="username" id="inputUser" required><br><br> <input class="enterPassword" type="text" placeholder="Password" name="password" id="inputPsswd" required><br><br> <p id="wrongPsswdText">Wrong password, try again.</p> <input id="submitButton" onclick="Login()" type="submit" value="Login" > </div> <script> const username = document.getElementById("inputUser").value; const password = document.getElementById("inputPsswd").value; function tryAgainText(){ var text = document.getElementById("wrongPsswdText"); text.style.display = "block"; } function Login(){ if(username == "admin" && password == "1234"){ window.location.replace("mainpage.html"); } else{ tryAgainText(); } } </script> </body> </html>¡Casi lo tienes! El único cambio es que, en lugar de comparar HTMLInputElement con una cadena, ¡compara su valor!
username.value == "admin" && password.value == "1234"
const username = document.getElementById("inputUser"); const password = document.getElementById("inputPsswd"); const text = document.getElementById("wrongPsswdText"); function tryAgainText() { text.style.display = "block"; } function Login() { if (username.value == "admin" && password.value == "1234") { console.log("Navigate to: mainpage.html"); } else { tryAgainText(); } } #wrongPsswdText { display: none; } body { display: flex; flex-wrap: nowrap; align-content: center; justify-content: center; } <div> <input class="enterUsername" type="text" placeholder="Username" name="username" id="inputUser" required><br><br> <input class="enterPassword" type="text" placeholder="Password" name="password" id="inputPsswd" required><br><br> <p id="wrongPsswdText">Wrong password, try again.</p> <input id="submitButton" onclick="Login()" type="submit" value="Login"> </div>