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

你没有在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);};

Answer 2

您需要将函数引用传递给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事件发生后执行，而不是像当前代码那样立即执行。

在页面加载开始时调用的函数--javascript

2 个答案: