Блог

Главная - Вопросы по программированию - Очистить сообщение о входе в форму с помощью функции setTimeout

Очистить сообщение о входе в форму с помощью функции setTimeout

#javascript #html #arrays #forms #web

#javascript #HTML #массивы #формы #веб

Вопрос:

Как я могу сделать так, чтобы сообщение о входе в систему скрывалось или исчезало после успешного входа пользователя в систему .. Кажется, что «Имя пользователя или пароль неверны» работает нормально, т.е. оно исчезает по истечении заданного времени в функции setTimeout, но сообщение «Пользователь вошел в систему», похоже, остается неизменным, т.епо истечении заданного времени оно не очищается, что я могу с этим поделать ?..Заранее спасибо

 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

 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 amp;amp; 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)
  
}

Комментарии:

1. Удалите оператор return; внутри, если условие успешного входа в систему.

Ответ №1:

Замените return оператор в вашем операторе if на break

когда имя пользователя и пароль верны, вы возвращаетесь из функции, и, следовательно, код не доходит до setTimeout вызова функции

Ответ №2:

 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 amp;amp; 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'
     }
   } 
 }

да, вы можете использовать ключевое слово break вместо return / использовать функцию setTimeout перед ключевым словом return или вы можете удалить ключевое слово return