Пользовательские кратные записи событий - Javascript - PullRequest
Новая
       35

Пользовательские кратные записи событий - Javascript

0 голосов
/ 04 декабря 2018

поэтому я написал собственное событие javascript для обработки, если имя пользователя существует среди списка пользователей.когда нет совпадения пользователей, хорошо регистрируется, что нет пользователя с таким именем.но проблема в том, что существует совпадение пользователей, если и тогда, и тогда выполняется одновременно.код работает следующим образом: пользователь вводит свое имя пользователя, и как только поле пароля щелкается, запускается событие, чтобы проверить, существует имя пользователя или нет.я новичок в javascript, я просто пытаюсь выяснить пользовательское событие спасибо.

ниже мой код: 

var user_list = [
 {
 username:"john",
 name:"john.doe",
 last_seen:"2mins ago"
 },
 {
 username:"mary",
 name:"Mary marta",
 last_seen:"2hrs ago"
 },
 {
 username:"susan",
 name:"susy457",
 last_seen:"45mins ago"
 },
 {
 username:"moses",
 name:"moe23",
 last_seen:"45mins ago"
 },  
];
var password = document.getElementById("passwordtext");
password.addEventListener('click', checkPassword);
//Custom event to grab username field when the user is about to type the         password
var users = document.getElementById('usertext');
users.addEventListener('trigger', function(e){
   var display = e.target.value;//e.target.value
   if(display === ""){
      //console.log('empty string..');
   }else{
       for(var i = 0; i < user_list.length; i++){
           if(user_list[i].username === display){
               console.log('user found..')
           }
           else{
               console.log('user not found!');
           }
       };
   };
    event.preventDefault();
});
function checkUser(){
  var event = new CustomEvent('trigger');
  users.dispatchEvent(event);    
};
function checkPassword(e){
  checkUser()
  passcode = e.target.value;
  //console.log(e.target.value);
  event.preventDefault();
};

edit: вот мой код формы HTML 

<form>
              <div class="form-row">
                <div class="col">
                  <input type="text" name="usertext" id ="usertext" class="form-control"placeholder="Email or username"/>
                </div>
                <div class="col">
                  <input type="password" id ="passwordtext" class="form-control" placeholder="password"/>
                </div>
                <div class="col-auto">
                  <a class="btn btn-primary" id="id-login" href="#" role="button">login</a>
                </div>
              </div>
            </form>

1 Ответ

0 голосов
/ 04 декабря 2018

Получите ваш чек вне цикла for.См. Этот пример.

Однако есть еще более простые способы сделать это, когда вы просто ищете свой объект Javascript на предмет существования пользователя вместо того, чтобы зацикливать объект. 

var user_list = [{
    username: "john",
    name: "john.doe",
    last_seen: "2mins ago"
  },
  {
    username: "mary",
    name: "Mary marta",
    last_seen: "2hrs ago"
  },
  {
    username: "susan",
    name: "susy457",
    last_seen: "45mins ago"
  },
  {
    username: "moses",
    name: "moe23",
    last_seen: "45mins ago"
  },
];
var password = document.getElementById("passwordtext");
password.addEventListener('click', checkPassword);
//Custom event to grab username field when the user is about to type the         password
var users = document.getElementById('usertext');
users.addEventListener('trigger', function(e) {
  var display = e.target.value; //e.target.value
  if (display === "") {
    //console.log('empty string..');
  } else {
    var userFound = false;
    for (var i = 0; i < user_list.length; i++) {
      if (user_list[i].username === display) {
        userFound = true;
        break;
      }
    };
    if (userFound) {
      console.log('user found!');
    } else {
      console.log('user not found!');
    }
  };
  event.preventDefault();
});

function checkUser() {
  var event = new CustomEvent('trigger');
  users.dispatchEvent(event);
};

function checkPassword(e) {
  checkUser()
  passcode = e.target.value;
  //console.log(e.target.value);
  event.preventDefault();
};
<form>
  <div class="form-row">
    <div class="col">
      <input type="text" name="usertext" id="usertext" class="form-control" placeholder="Email or username" />
    </div>
    <div class="col">
      <input type="password" id="passwordtext" class="form-control" placeholder="password" />
    </div>
    <div class="col-auto">
      <a class="btn btn-primary" id="id-login" href="#" role="button">login</a>
    </div>
  </div>
</form>
...