Mon eventhandler ajouté ne fonctionnant qu'une seule fois quand la page est chargée

J'essaie de vérifier si l'utilisateur change de champ alors qu'il est encore vide. Et j'ajoute event listener sur le champ de nom d'utilisateur quand l'utilisateur passe d'un champ à l'autre alors il obtient soit un signe de chèque ou une erreur.
Mon fichier HTML:Mon eventhandler ajouté ne fonctionnant qu'une seule fois quand la page est chargée

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Registeration form</title> 
     <link type="text/css" rel="stylesheet" href="css/fontawesome.css"/> 
    </head> 
    <body> 
     <form method="post"> 
      <fieldset> 
       <input type="text" name="user_name" id="user_name" style="display:inline;float:left;" placeholder="User Name"> 
       <li id="name_status" style="list-style-type:none;"></li> 
      </fieldset> 
      <fieldset> 
       <input type="text" name="email" id="email" style="display:inline;float:left;" placeholder="Email Address"> 
       <li id="email_status" style="list-style-type:none;"></li> 
      </fieldset> 
      <fieldset> 
       <input type="button" name="submit" id="submit" value="submit"> 
      </fieldset> 
     </form> 
    <script type="text/javascript" src="js/test.js"></script> 
    </body> 
</html>

fichier Mon Javascript:

var user_name=document.getElementById("user_name"); 
var user_name_status=document.getElementById("name_status"); 

user_name.addEventListener("blur",check_empty(user_name.value,user_name_status),false); 
function check_empty(value,status){ 
    if(value.length===0){ 
     status.innerHTML="<sup>*</sup>This feild cannot be empty"; 
    } else { 
     status.innerHTML="<i class='icon-check'></i>"; 
    } 
}

Source

2017-02-18 Kobey24

Vous appelez immédiatement la fonction. – guest271314

alors quelle est la bonne façon – Kobey24

Je suis un débutant alors pouvez-vous suggérer du code – Kobey24

Je pense que la meilleure option pour vous est de passer la fonction avec l'argument dans une fonction anonyme comme le code ci-dessous montre.

var user_name = document.getElementById("user_name"); 
 
var user_name_status = document.getElementById("name_status"); 
 

 
user_name.addEventListener("blur",function(){check_empty(user_name.value,user_name_status);},false); 
 
function check_empty(name,status) { 
 
    if (name.length === 0) { 
 
    status.innerHTML = "<sup>*</sup>This feild cannot be empty"; 
 
    } else { 
 
    status.innerHTML = "<i class='icon-check'>check</i>"; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Registeration form</title> 
 
</head> 
 

 
<body> 
 
    <form method="post"> 
 
    <fieldset> 
 
     <input type="text" name="user_name" id="user_name" style="display:inline;float:left;" placeholder="User Name"> 
 
     <li id="name_status" style="list-style-type:none;"></li> 
 
    </fieldset> 
 
    <fieldset> 
 
     <input type="text" name="email" id="email" style="display:inline;float:left;" placeholder="Email Address"> 
 
     <li id="email_status" style="list-style-type:none;"></li> 
 
    </fieldset> 
 
    <fieldset> 
 
     <input type="button" name="submit" id="submit" value="submit"> 
 
    </fieldset> 
 
    </form> 
 
</body> 
 

 
</html>

Source

2017-02-19 07:48:35

Vous appelez check_empty immédiatement. Vous pouvez passer la référence de fonction check_empty à .addEventListener(). Dans le gestionnaire d'événements, this références user_name. Au lieu de passer la variable status, utilisez la variable définie user_name_status dans le gestionnaire d'événements.

var user_name = document.getElementById("user_name"); 
 
var user_name_status = document.getElementById("name_status"); 
 

 
user_name.addEventListener("blur", check_empty, false); 
 

 
function check_empty(e) { 
 
    if (this.value.length === 0) { 
 
    user_name_status.innerHTML = "<sup>*</sup>This feild cannot be empty"; 
 
    } else { 
 
    user_name_status.innerHTML = "<i class='icon-check'>check</i>"; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Registeration form</title> 
 
</head> 
 

 
<body> 
 
    <form method="post"> 
 
    <fieldset> 
 
     <input type="text" name="user_name" id="user_name" style="display:inline;float:left;" placeholder="User Name"> 
 
     <li id="name_status" style="list-style-type:none;"></li> 
 
    </fieldset> 
 
    <fieldset> 
 
     <input type="text" name="email" id="email" style="display:inline;float:left;" placeholder="Email Address"> 
 
     <li id="email_status" style="list-style-type:none;"></li> 
 
    </fieldset> 
 
    <fieldset> 
 
     <input type="button" name="submit" id="submit" value="submit"> 
 
    </fieldset> 
 
    </form> 
 
</body> 
 

 
</html>

Source

2017-02-18 18:35:11 guest271314

Comment puis-je ajouter un événement sur le terrain spécifique seulement comme j'utilisais le flou est-ce exact? @ guest271314 – Kobey24

@ Kobey24 Voir le post mis à jour. – guest271314

Je passais deux arguments parce que plus tard, je vais passer plusieurs champs comme le courrier électronique et d'autres par la même fonction @ guest271314 – Kobey24

Mon eventhandler ajouté ne fonctionnant qu'une seule fois quand la page est chargée

Répondre

Questions connexes