페이지가로드 될 때만 내 추가 된 이벤트 핸들러가 작동합니다.

사용자 입력란이 아직 비어있는 동안 사용자 변경 필드가 있는지 확인하려고합니다. 사용자가 한 필드에서 다른 필드로 이동할 때 사용자 이름 필드에 이벤트 수신기를 추가하고 있습니다. 체크 표시 나 오류가 발생합니다.
내 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>

내 자바 스크립트 파일 :

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을 전달하는 대신 이벤트 핸들러 내에서 정의 된 varibale user_name_status을 사용하십시오.

출처

2017-02-18 18:35:11 guest271314

어떻게하면 특정 필드에 이벤트를 추가 할 수 있습니까? @ guest271314 – Kobey24

@ Kobey24 업데이트 된 게시물보기. – guest271314

나중에 두 함수를 전달하기 때문에 email과 같은 여러 필드를 같은 함수로 전달할 것이기 때문에 @ guest271314 – Kobey24

페이지가로드 될 때만 내 추가 된 이벤트 핸들러가 작동합니다.

답변

관련 문제