Passing execution context in JavaScript from html elements

Viewed 218

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.

1 Answers

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>


Related