Функция, вызванная в начале загрузки страницы - 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). Затем, когда я ввожу текст в текстовое поле, он не изменяется, он по-прежнему остается красным и отображает ошибку.

Это, как я звоню функции:

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

Вы не передаете функцию onblur в init; вы передаете результат функции.

Смотрите следующий пример:

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 

Youre не используя библиотеку как JQuery, чтобы прикрепление/добавление слушателей событий легко, так что это немного боли, чтобы установить слушателя событий с использованием чистого JS и прочитать событие в функции. Там должна быть некоторая информация о SO как сделать это уже в любом случае

В вашем случае вы можете попробовать это:

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