Use of "this" keyword in javascript

Question

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!!!

When you call `checkValid()`, `this` is `window`. When calling it, you either have to do something like `this.checkValid = checkValid; this.checkValid()` or call it like `checkValid.call(this)`. — Siguza, Dec 30 '16 at 15:21
Possible duplicate of [How does the "this" keyword work?](http://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — Heretic Monkey, Dec 30 '16 at 15:31

score 1 · Accepted Answer · answered Dec 30 '16 at 15:22

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.

score 0 · Answer 2 · answered Dec 30 '16 at 15:22

0

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.

answered Dec 30 '16 at 15:22

Pointy

371,531
55
528
584

so what's the difference between – Piyush Bhuwalka Dec 30 '16 at 15:38
document.getElementById("noFun").oninput = checkValid; – Piyush Bhuwalka Dec 30 '16 at 15:39
AND Type anything but "fun": – Piyush Bhuwalka Dec 30 '16 at 15:40

Use of "this" keyword in javascript

2 Answers2