0

我有个问题; 出于某种原因，我的函数在页面加载时在 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。任何人都可以建议解决这个问题的方法吗？

4

2 回答 2

1

You're not passing the function to onblur in init; you are passing the result of the function.

See the following example:

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 not using a library like jQuery to make attaching/adding event listeners easy so it's a bit of a pain to set the event listener using pure JS and read the event in the function. There must be some info on SO how to do this already anyway

In your case you could try this:

promoCode.onblur = function(){ validatePromoCode.call(promoCode,promCode);};
于 2013-05-16T06:10:29.890 回答
1

You need to pass function references to onblur, not the result of immediately calling a function. Change to this:

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

This changes each onblur assignment to take an anonymous function reference that will be executed later when the onblur event happens, not immediately like your current code was doing.

于 2013-05-16T06:26:33.607 回答