I want to make an easy login page in html and JavaScript but the if statement always returns false
<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>
What can I do so it will redirect me to mainpage.html when I set the username and password to admin and 1234?
Use Element.value
<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>
you need to put JavaScript code at the end of the body
and put value property in username and 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>
You almost had it! The only change is that instead of comparing the HTMLInputElement to a string you do compare its value!
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>