ページがロードされたときに初めて追加されたイベントハンドラー

ユーザー変更フィールドがまだ空であるかどうかを確認しようとしています。ユーザーがフィールドフィールドにイベントリスナーを追加しています。チェック・マークまたはエラーが表示されます。
私のHTMLファイル：ページがロードされたときに初めて追加されたイベントハンドラー

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

私の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>"; 
    } 
}

出典

2017-02-18 Kobey24

あなたはすぐに関数を呼び出しています。 – guest271314

これは正しい方法です – Kobey24

私は初心者ですので、いくつかのコードを提案することができます – Kobey24

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>

私はあなたのための最良のオプションは、ショー以下のコードのような匿名関数の内部で引数を持つ関数を渡すことだと思います。

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>

出典

2017-02-19 07:48:35

あなたはすぐにcheck_emptyを呼んでいます。関数参照check_emptyを.addEventListener()に渡すことができます。イベントハンドラ内でthisはuser_nameを参照しています。変数statusを渡す代わりに、イベントハンドラ内で定義されたバリバuser_name_statusを使用してください。

出典

2017-02-18 18:35:11 guest271314

どのように私はぼかしを使用していたような特定のフィールドにイベントを追加することができますか？ @ guest271314 – Kobey24

@ Kobey24最新の記事を参照してください。 – guest271314

私は2つの引数を渡していました。後で同じ機能を使って電子メールなどの複数のフィールドを渡すためです@ guest271314 – Kobey24

ページがロードされたときに初めて追加されたイベントハンドラー

答えて

関連する問題