0

私は問題があります; 何らかの理由で、ページの読み込み中に webapplication の開始時に関数が呼び出されています。

私のコードは次のとおりです

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
}

この関数のロジックは、ユーザーが名前を入力するテキスト ボックスを検証することです。基本的に、私が直面している問題は、Web ページを開くとすぐに、テキスト ボックスが赤く表示され、「名前を空白にすることはできません!」と表示されることです。（これはです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

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);};
于 2013-05-16T06:10:29.890 に答える
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 割り当てが変更され、現在のコードのようにすぐに実行されるのではなく、後でイベントが発生したときに実行される無名関数参照が取得されます。

于 2013-05-16T06:26:33.607 に答える