该功能不起作用

Question

I've got a problem with this code. When I wrote the first code everything is ok but after processing it doesn't work. Why is it like that? I sent an event object to function as an argument so what's the problem?

Initial code:

var isOkej = null;
function isNumber(someValue) {
    return !isNaN(someValue);
}
window.onload = function () {
    var wykonawca = document.getElementById("informations").artist;
    var tytul = document.getElementById("informations").title;
    var label = document.getElementById("informations").label;
    var kindOftxt = document.getElementById("kindOftxt");

    var action = function (e) {
        //pokazuje unicode wpisanego znaku
        var wpisanyZnak = e.which;
        if (isNumber(this.value) || wpisanyZnak === 190) {
            e.preventDefault();
            if (this === wykonawca)
                kindOftxt.innerHTML = "Podaj swój Alias";
            else if (this === tytul)
                kindOftxt.innerHTML = "Podaj tytuł utworu";
            else
                kindOftxt.innerHTML = "Gdzie utwór został wydany";

            this.style.backgroundColor = "red";
            isOkej = false;
        } else {
            this.style.backgroundColor = "green";
            kindOftxt.innerHTML = "";
            isOkej = true;
        }
    };
    wykonawca.onkeyup = action;
    tytul.onkeyup = action;
    label.onkeyup = action;
}

Final code:

function isNumber(someValue) {
    return !isNaN(someValue);
}
var isOkej = null;
 function action (e, wykonawca, tytul,kindOftxt) {
        //pokazuje unicode wpisanego znaku
        var wpisanyZnak = e.which;
        if (isNumber(this.value) || wpisanyZnak === 190) {
            e.preventDefault();
            if (this === wykonawca)
                kindOftxt.innerHTML = "Podaj swój Alias";
            else if (this === tytul)
                kindOftxt.innerHTML = "Podaj tytuł utworu";
            else
                kindOftxt.innerHTML = "Gdzie utwór został wydany";

            this.style.backgroundColor = "red";
            isOkej = false;
        } else {
            this.style.backgroundColor = "green";
            kindOftxt.innerHTML = "";
            isOkej = true;
        }
    };

window.onload = function () {
    var wykonawca = document.getElementById("informations").artist;
    var tytul = document.getElementById("informations").title;
    var label = document.getElementById("informations").label;
    var kindOftxt = document.getElementById("kindOftxt"); 

    wykonawca.onkeyup = function (e) {
        action(e, wykonawca,tytul,kindOftxt);
    };    
     tytul.onkeyup = function (e) {
        action(e, wykonawca,tytul,kindOftxt);
    };    
    label.onkeyup = function (e) {
        action(e, wykonawca,tytul,kindOftxt);
    };    }

I really don't know what can be the reason. What do you think can be a problem?

Answer 1

When you bind the events with the following code, the this inside action function is bound to the input element.

wykonawca.onkeyup = action;
tytul.onkeyup = action;
label.onkeyup = action;

When you bind the events with the updated code

wykonawca.onkeyup = function (e) {
    action(e, wykonawca,tytul,kindOftxt);
};    
tytul.onkeyup = function (e) {
   action(e, wykonawca,tytul,kindOftxt);
};    
label.onkeyup = function (e) {
    action(e, wykonawca,tytul,kindOftxt);
};

the this inside the anonymous event handlers is bound to the input element, but in the action function, this would refer to the global object ie the window object.

You can pass the this reference from your anonymous handlers to the action function as an additional argument.