我添加的事件處理程序只在頁面加載時工作一次

我想檢查用戶是否仍然爲空時更改字段。並且我在用戶名字段中添加了事件偵聽器，因此當用戶從一個字段移動到其他字段時那麼他會得到一個檢查標記或一個錯誤。
我的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",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。使用事件處理程序中定義的varibale user_name_status而不是傳遞變量status。

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>

來源

2017-02-18 18:35:11 guest271314

如何添加一個事件只在特定的領域，就像我使用模糊是正確的？ @ guest271314 – Kobey24

@ Kobey24查看更新後的帖子。 – guest271314

我傳遞了兩個參數，因爲稍後我會通過相同的函數傳遞多個字段，例如電子郵件和其他字符@ guest271314 – Kobey24

我添加的事件處理程序只在頁面加載時工作一次

回答

相關問題