Passing execution context in JavaScript from html elements

Question

I am very new to JavaScript programming, and i am trying to do form validation using JavaScript.

While learning form validation i was reading about how to disable submit button until all input fields are validated, i saw many techniques to do this, but, i am confused regarding the following code:

<body>
    <h3>Enter some values in the text to enable the button!</h3>
    <input type="text" id="txt" onkeyup="manage(this)" /> //focus here on "this" parameter
    <input type="submit" id="btSubmit" disabled />
</body>

<script>
    function manage(txt) {
        var bt = document.getElementById('btSubmit');
        if (txt.value != '') {
            bt.disabled = false;
        }
        else {
            bt.disabled = true;
        }
    }    
</script>

Here this is passed as an argument from an input element event listener in html. I tried passing something other than this from there, it didn't work only passing this works,

As far as i know this in JavaScript signifies current-execution-context, but since this is JavaScript keyword then how it is interpreted inside html?

JS FIDDLE LINK while passing 'this': https://jsfiddle.net/s0vnjpqb/

JS FIDDLE LINK while passing 'some': https://jsfiddle.net/s0vnjpqb/

PS: I am new to JavaScript, hence the question is easy, this might not match the standards of stack-overflow, but i tried researching in stack-overflow as well as on other platform i couldn't understand it.

There is no difference to how it is interpreted "in html". The `onkeyup` attribute value basically becomes the body of a `function` that is called as an event handler. Please show us how you tried passing other things. — Bergi, May 10 '20 at 17:35
instead of passing this from onkeyup, i tried passing "some_random_value" , that is replace "this" with "some_random_value" it didn't work. — Ayush Mishra, May 10 '20 at 17:37
Please show the code of that. And make sure the code is valid JS even after going through HTML escaping — Bergi, May 10 '20 at 17:39
The binding of `this` in javascript is a bit more dynamic and complicated compared to other languages. See my answer to this related question for how `this` behaves (note: I've tried and will continue trying to update the answer as javascript evolves): https://stackoverflow.com/questions/13441307/how-does-the-this-keyword-in-javascript-act-within-an-object-literal/13441628#13441628 — slebetman, May 10 '20 at 18:09

Ganesh Thorat · Accepted Answer · 2020-05-10T17:45:54.507

As you mentioned correctly in the description that this in Javascript signifies the current execution context.

Similarly in html

this also represent the value of the ThisBinding of the current execution context and this.value indicates the value of the current execution context

e.g txt.value in your case.

Alternately what you can do is,

<body>
    <h3>Enter some values in the text to enable the button!</h3>
    <input type="text" id="txt" onkeyup="manage()" /> //focus here on "this" parameter
    <input type="submit" id="btSubmit" disabled />
</body>

<script>
    function manage(txt) {
       var value = document.getElementById("txt").value;
        var bt = document.getElementById('btSubmit');
        if (value != '') {
            bt.disabled = false;
        }
        else {
            bt.disabled = true;
        }
    }    
    
    </script>

so do you mean "this" is also a reserved keyword in html? Since if i pass anything other that **this**(keyword), code dosen't work. — Ayush Mishra, May 10 '20 at 17:47
Good question Ayush.. :) I hope this answers your question, please have a look :) https://www.quirksmode.org/js/this.html — Ganesh Thorat, May 10 '20 at 17:53

Passing execution context in JavaScript from html elements

1 Answers1