How to check variable value in html-CodePudding

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  type="text" placeholder="Username" name="username" id="inputUser" required><br><br>
             <input  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?

CodePudding user response：

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  type="text" placeholder="Username" name="username" id="inputUser" required><br><br>
             <input  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>

CodePudding user response：

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  type="text" placeholder="Username" name="username" id="inputUser" required><br><br>
  <input  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>

CodePudding user response：

<style>
    .enterUsername{
        margin-top: 350px;
        margin-left: 710px;
    }
    .enterPassword{
        margin-left: 710px;
    }
    #submitButton{
        margin-left: 760px;
    }
    #wrongPsswdText{
        margin-left: 720px;
        display: none;
    }
</style>
<script>
var username = document.getElementById("inputUser");
var password = document.getElementById("inputPsswd");

function tryAgainText(){
    var text = document.getElementById("wrongPsswdText");
    text.style.display = "block";
}
function Login(){
  if(username.value == "admin" && password.value == "1234"){
      window.location.replace("mainpage.html");
     
 }
 else{
       tryAgainText();
       
    }
}
</script>
<body>
    <div>
         <input  type="text" placeholder="Username" name="username" id="inputUser" required><br><br>
         <input  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>

CodePudding user response：

Use Element.value

<html>

    <style>
    
    </style>
    <body>
        <div>
             <input  type="text" placeholder="Username" name="username" id="inputUser" required><br><br>
             <input  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>

CodePudding user response：

You need to use the script tag at the final of the body tag

(the content of your HTML file) is executed sequentially, and until you accept or close any javascript dialog (alert, prompt or confirm) the browser will not continue executing the rest.

This is the reason why on some websites, the JS files are put at the end before the closing Body tag so that the user can see the content while the javascript files are loaded below.

To obtain the value of your input tag need to use document.getElementById('exampleID').value it will return the value of the placeholder input.

<style>
    .enterUsername{
        margin-top: 350px;
        margin-left: 710px;
    }
    .enterPassword{
        margin-left: 710px;
    }
    #submitButton{
        margin-left: 760px;
    }
    #wrongPsswdText{
        margin-left: 720px;
        display: none;
    }
</style>

<body>
    <div>
         <input  type="text" placeholder="Username" name="username" id="inputUser" required><br><br>
         <input  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');
        console.log("