Q: Clear login message on form with setTimeout function How can I make the login message to hide or disappear after user has succesfully logged in..
The "Username or password is incorrect" seems to be working fine i.e it disappears after the given time in the setTimeout function but the "User is logged in" message seems to be stagnant i.e it doesn't clear after the given time, What Can I do about It?..Thanks in advance
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
  <title>Login System</title>
</head>
<body>

  <div class="card">
    <div class="container">
      <h3>Fransix web</h3>
  <form>
    <h4>Log-in to your account</h4>
    <div class="field">
    <i class="fas fa-user"></i>
    <input type="text" id="username" placeholder="Username">
  </div>
  <div class="field">
    <i class="fas fa-lock"></i>
    <input type="text" id="password" placeholder="Password">
  </div>
    <a class="btn" href="#" onclick="getInfo()">Submit</a>
  </form>
</div>
<h5 class="message"></h5>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="app.js"></script>
</body>
</html>

Javascript Code
var Users = [
  {
    username: "fransix",
    password: "web"
  },
  
  {
    username: "dave",
    password: "spider"
  },
  
  {
    username: "mike",
    password: "battery"
  }
]


function getInfo() {
  var username = document.getElementById("username").value
  var password = document.getElementById("password").value
  var message = document.querySelector
  (".message")
  
  for(i = 0; i < Users.length; i++) {
    if(username === Users[i].username && password === Users[i].password) {
      message.innerHTML = `${username} is logged in!!`
      message.style.color = 'green';
      return;
    }
    else {
      message.innerHTML = `Username or password is incorrect`
      message.style.color = 'red'
    }
  } 
  setTimeout(function() {
    $(".message").hide()
  },3000)
  
}


A: Replace the return statement in your if statement with break
when the username and password are right you are returning from function and thus the code does not reaches to the setTimeout function call

A: function getInfo() {                                                 
   var username = document.getElementById("username").value       
   var password = document.getElementById("password").value
   var message = document.querySelector
   (".message")
   for(i = 0; i < Users.length; i++) {
     if(username === Users[i].username && password === Users[i].password) {
       message.innerHTML = `${username} is logged in!!`
       message.style.color = 'green';
       setTimeout(function() {
          $('.message').hide();
        },3000)
       return;
     }
     else {
      message.innerHTML = `Username or password is incorrect`
      message.style.color = 'red'
     }
   } 
 }

yes, you can use the break keyword instead of return / use the setTimeout function before the return keyword or either you can remove the return keyword
