CODEWITHSUNDEEP
javascripthtml
Piyush Bhuwalka
Piyush Bhuwalka

Reputation: 57

Use of "this" keyword in javascript

I have read about "this" keyword and I learned that 'this' keyword works for the object which is in context.

    <!DOCTYPE html>
    <html>
    <body>



    <form id="myForm">
    <label>Type anything but "fun": <input id="noFun" type="text" oninput="checkValid" required ><input type="submit"></label>                                                              
    <div><button onclick="previewMessage()">Preview errors</button></div>
    <div id="err"></div>
    </form>

    <script>

        function checkValid() {
            if (this.value == "fun") {
                this.setCustomValidity("You're having too much fun!");
            } else {
        // input is fine -- reset the error message
        this.setCustomValidity('');
            }
        }
        function previewMessage() {
            var myform = document.getElementById("noFun")
            document.getElementById("err").innerHTML = myform.validationMessage;
        }
    </script>

    </body>
    </html>

But when I use oninput = "checkValid" , it should copy the checkValid function and the "this" keyword inside the function should point to input object.But that's not the case!!!

Check out this another piece of code, it means the same as the previous one, but runs normally.

    <form id="myForm">
    <label>Type anything but "fun": <input id="noFun" type="text"         oninput="checkValid(this)" required ><input type="submit"></label>
    <div><button onclick="previewMessage();">Preview errors</button></div>
    <div id="err"></div>
    </form>
    <script>
        function checkValid(input) {
            if (input.value == "fun") {
                input.setCustomValidity("You're having too much fun!");
            } else {
                // input is fine -- reset the error message
                input.setCustomValidity('');
            }
        }
        function previewMessage() {
            var myform = document.getElementById("noFun")
            document.getElementById("err").innerHTML=myform.validationMessage;
        }
    </script>

Can you explain me the difference between the two snippets and why the first example does not work as expected.

Thanks in advance!!!

Upvotes: 0

Views: 276

Answers (2)

Pointy
Pointy

Reputation: 413682

The way you've set up the event handler is such that the value of this will not be the <input> element. You've got what amounts to a "naked" function call, so this will refer to the window object.

If, however, you were to establish the event handler in JavaScript like this:

document.getElementById("noFun").oninput = checkValid;

you'd get this referring to the element.

Note that your code will pass the reference to the element as a parameter, which is why your second sample of code works.

Upvotes: 0

Quentin
Quentin

Reputation: 943089

But when i use oninput="checkValid" , it should copy the checkValid function and the "this" keyword inside the function should point to input object.

No, it shouldn't.

The value of an intrinsic event attribute is the body of the event handler function.

The HTML oninput="checkValid" is equivalent to the JavaScript:

reference_to_input.oninput = function (event) {
    checkValue;
};

Mentioning a variable (like checkValue) without doing anything to it (like putting () after it to call a function) does nothing.

Upvotes: 1

Related Questions