Custom event logging multiples

I wrote a custom Javascript event to handle if username exists among the list of users. when there is no user match, it logs fine that there is no user with that name. but the problem is when there is a user match, both if and else runs simultaneously. the code works like this: user types his username, and as soon as the password field is clicked, an event is fired to check if username exists or not. I am new to Javascript am just trying to figure out custom event thanks.

Below is my code:

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: here is my html form code

<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>

Get your check outside of the for loop. See this example.

However there are even easier ways to do it when you just search your Javascript object for the existence of a user instead of looping the object.

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>