JSFiddle - React, Tailwind, and code Playground

by rvbd

HTML

<html>
    <head></head>
    <body>
        <p>Let's test some closure</p>
        <p>Please input anything</p>
        <input type="text" id="testInput" />
        <input type="button" id="execute" value="Print value" />
    </body>
    
</html>

JavaScript

function ScopeTester() {
    this.textValue = "Hi All"; //instantiate with a simple text
}

//a test function that takes a tester id of an element
//this will assign an event action when ready, it will simply save the data in our object
ScopeTester.prototype.test = function(testerID) {
    var self = this;
    
    $(document).ready(function() {
        $('#testInput').change(function() {
            self.textValue = $(this).val();
        });
    });
}

ScopeTester.prototype.printValue = function() {
     alert(this.textValue);   
}

var testerObj = new ScopeTester();
testerObj.test();

$('#execute').click(function() {
    testerObj.printValue();
});