函數在頁面加載開始時調用 - javascript

Question

我有一個問題;出於某種原因，我的函數在頁面加載時在web應用程序的開始時被調用。

我的代碼如下

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）。然後，一旦我在我的文本框中輸入文本，它不會改變，它仍然保持紅色，並顯示錯誤。

這就是我如何調用該函數：

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(); 
} 

我不明白爲什麼它被立即調用的頁面加載，因爲它的設置，被稱爲onblur。 任何人都可以提出解決這個問題的方法嗎？

Answer 1

你需要的功能的引用傳遞給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 = 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設置事件偵聽器和閱讀活動在函數中。必須有對SO一些信息如何做到這一點已經反正

在你的情況，你可以試試這個：

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