페이지 로딩을 시작할 때 함수가 호출되었습니다 - javascript

Question

문제가 있습니다. 어떤 이유로, 페이지가로드되는 동안 웹 응용 프로그램이 시작될 때 내 함수가 호출됩니다.

function validateName(element) { 
     var len = element.value.length; 

     //checks if the code is than 6 characters 
     if (len == 0) { 
      element.style.backgroundColor="red";  
      if (element.id == "firstname") 
      { 
       document.getElementById('firstNameError').style.display = "block"; 
      } 
      else if (element.id == "lastname") { 
       document.getElementById('lastNameError').style.display = "block";     
      } 
      return true; 
     } //if == 0 
     else { 
      element.style.backgroundColor="green";  
      if (element.id == "firstname") 
      { 
       document.getElementById('firstNameError').style.display = "none"; 
      } 
      else if (element.id == "lastname") { 
       document.getElementById('lastNameError').style.display = "none";     
      } 
     return false; 
     } // if != 0 
} 

이 함수의 로직은 사용자가 자신의 이름을 입력 텍스트 상자를 확인하는 것입니다 다음과 같이

내 코드입니다. 기본적으로, 내가 직면하고있는 문제는 바로 내 웹 페이지를 열면 텍스트 상자가 빨간색으로 표시되며 '귀하의 이름은 비워 둘 수 없습니다!'라고 말합니다. (firstNameError). 그런 다음 텍스트 상자에 텍스트를 입력하면 변경되지 않고 여전히 빨간색으로 유지되고 오류가 표시됩니다.

이 내가 함수를 호출하고 어떻게 :이 페이지가로드하자마자 호출되는 왜 그것이, 설정되어 onblur를 호출 할 수 있기 때문에 내가 이해하지 못하는

function init() { 
    var firstName = initToolTip("firstname", "firstnameTip"); 
    var lastName = initToolTip("lastname", "lastnameTip"); 
    var promoCode = initToolTip("promocode", "promocodeTip"); 
    //opens the TOS window when you click 'terms and conditions' link 
    document.getElementById("clickedTOS").onclick = function() { sAlert(document.getElementById("TOS").innerHTML) }; 
    //checks the length of the promo code 
    promoCode.onblur = validatePromoCode(promoCode); 
    //checks the validity of a name (is not blank) 
    firstName.onblur = validateName(firstName); 
    lastName.onblur = validateName(lastName); 
    //document.getElementById('submitButton').onmousedown = validateForm(); 
} 

. 누구든지이 문제를 해결할 방법을 제안 할 수 있습니까?

Answer 1

당신은 onblur에 함수 참조를 전달해야하지 즉시 함수를 호출 한 결과 : 어쨌든

귀하의 경우에는 당신이 시도 할 수 이미이 작업을 수행하는 방법을 SO에 대한 약간의 정보가 있어야합니다. 이로 변경

function init() { 
    var firstName = initToolTip("firstname", "firstnameTip"); 
    var lastName = initToolTip("lastname", "lastnameTip"); 
    var promoCode = initToolTip("promocode", "promocodeTip"); 
    //opens the TOS window when you click 'terms and conditions' link 
    document.getElementById("clickedTOS").onclick = function() { sAlert(document.getElementById("TOS").innerHTML) }; 
    //checks the length of the promo code 
    promoCode.onblur = function() {validatePromoCode(promoCode);}; 
    //checks the validity of a name (is not blank) 
    firstName.onblur = function() {validateName(firstName);}; 
    lastName.onblur = function() {validateName(lastName);{; 
    //document.getElementById('submitButton').onmousedown = validateForm(); 
} 

이것은 onblur 이벤트가 현재 코드가 뭘하고 있었하지 즉시처럼 발생했을 때 나중에 실행됩니다 익명 함수 참조를 가지고 각에 onblur 할당을 변경합니다.

Answer 2

init에서 onblur에 함수를 전달하지 않습니다. 함수의 결과를 전달하고 있습니다.

다음 예를 참조하십시오

var Afuntion=function(){ 
    console.log("hello from function"); 
    return 22; 
} 
Element.onblur=Afunction("something");//Element.onblur is now 22 and 
    // "hello from function" is logged 
Element.onblur=Afunction; //now onblur has a reference to the function 
Element.onblur();//this will log "hello from function" and return 22 

jQuery를 그것이 고통의 비트가 순수 JS를 사용하여 이벤트 리스너를 설정하고 이벤트를 읽을 그래서 쉽게 이벤트 리스너를 추가/부착하기 위해 같은 라이브러리를 사용하지 개봉 함수에서.

promoCode.onblur = function(){ validatePromoCode.call(promoCode,promCode);};