Question 44195 in Html Question posted in
Some basic documentation can be found here.

Want to be able to have a specific input text box be checked for a specific word! Vanilla JS – Html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Project Keypad</title>
  <link rel="stylesheet" href="css/style.css">
  
</head>
<body class="light-mode">
    
   
   
        
        <button onclick="myFunction()" id="toggle-button">☀️</button>

      <h2> Welcome to Project Keypad</h2>
   <form>
      <div id="login">
   Enter Username: <input type="text" id="userName" placeholder="Enter username here">
   <br><br>
   Enter Password: <input type="text" id="enterPassword" placeholder="Enter password here">
   
   <br><br>
   <input type="reset">
   
   <button onclick="logButton()">Log In</button>
    </div>
    </form>

 
 <script src="js/script.js"></script>
 <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

</body>

<footer>

    
</footer>

</html>

 const correctUser = 'keypaduser';

 const correctPassword = 'animal123';

  // const correctPassword = animal123;

   function logButton () {
   
   
    if (userName = correctUser) {
      alert ("Thank you for Login & Redirecting you to Home Page!");
      // window.location = "homepage.html"

      
      
    }

    else  {
      alert ("Username or Password Incorrect!")
    }



   }

I’m trying to make the most basic verification system with a set username and password but can’t seem to get it

to verify the correct password and username.

I just want it to redirect you to another html page if you eneter keypaduser and the password animal123 in the text field and if its anything else alert you it’s wrong.

If someone could help me figure this out it would be much appreciated!

Tags:

2

Answers


  1. 0
    • Use === (recommended) or == to compare values. = is for assignment.
    • You need to read the value of each <input> element for the comparison.
    • It is better practice to use addEventListener over inline event handlers.
    const correctUser = 'keypaduser';
const correctPassword = 'animal123';
document.getElementById('loginBtn').addEventListener('click', e => {
  e.preventDefault(); // prevents form submission for this example
  if (document.getElementById('userName').value === correctUser && 
      document.getElementById('enterPassword').value === correctPassword) {
      console.log('credentials correct');
  } else {
    console.log('invalid credentials');
  }
});
    <h2> Welcome to Project Keypad</h2>
<form>
  <div id="login">
    Enter Username: <input type="text" id="userName" placeholder="Enter username here">
    <br><br> Enter Password: <input type="text" id="enterPassword" placeholder="Enter password here">
    <br><br>
    <input type="reset">
    <button id="loginBtn">Log In</button>
  </div>
</form>
<script src="js/script.js"></script>
    Login or Signup to reply.
  2. 0

    Check it now..

    • Use === (it compare with data type) or == (it compare without data type) to compare values. = is used for only as an assignment operator.
    • You need to get value of input field inside the function because initial loading gives you the value nothing.
    const correctUser = 'keypaduser';
const correctPassword = 'animal123';

function logButton () {
  const userName = document.getElementById("userName").value;
  const enterPassword = document.getElementById("enterPassword").value;
    if (userName == correctUser) {
      alert ("Thank you for Login & Redirecting you to Home Page!");
      // window.location = "homepage.html"
    }
    else  {
      alert ("Username or Password Incorrect!")
    }
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Project Keypad</title>
  <link rel="stylesheet" href="css/style.css">
  
</head>
<body class="light-mode">
       <button onclick="myFunction()" id="toggle-button">☀️</button>
      <h2> Welcome to Project Keypad</h2>
   <form>
      <div id="login">
          Enter Username: <input type="text" id="userName" placeholder="Enter username here">
          <br><br>
            Enter Password: <input type="text" id="enterPassword" placeholder="Enter password here">
   
         <br><br>
         <input type="reset">
   
          <button onclick="logButton()">Log In</button>
      </div>
   </form>


 <script src="js/script.js"></script>
 <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

</body>

<footer>

    
</footer>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search