JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<input type='text' id='myInputVisiblea' />
<input type='button' value='set value' id="testSet1" />
<input type='button' value='get value' id="testSet5" />
<br>
<input type='checkbox' id='myInputVisibleb' />
<input type='button' value='checked' id="testSet2" />
<input type='button' value='unchecked' id="testSet3" />
<input type='button' value='getchecked' id="testSet4" />
<br> check input type text
<br> check input type radiobutton checked
<br> check input type checkbox checked
<br> check textarea
<br>

JavaScript

Object.defineProperty(Object.prototype, "watchDomObject", {
    enumerable: false,
    configurable: true,
    writable: false,
    value: function(prop, callbackFn) {
        var originalDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, prop);
        var oldval = this[prop],
            newval = oldval,
            getter = function() {
                return originalDescriptor.get.call(this, newval);
            },
            setter = function(val) {
                oldval = newval;
                originalDescriptor.set.call(this, val);
                callbackFn.call(this, prop, val);
            };

        if (delete this[prop]) { // can't watch constants
            Object.defineProperty(this, prop, {
                get: getter,
                set: setter,
                enumerable: true,
                configurable: true
            });
        }
    }
});


// object.unwatch
if (!Object.prototype.watchDomObject) {
    Object.defineProperty(Object.prototype, "unwatch", {
        enumerable: false,
        configurable: true,
        writable: false,
        value: function(prop) {
            var val = this[prop];
            delete this[prop]; // remove accessors
            this[prop] = val;
        }
    });
}



//hidden input which your API will be changing
var myInputa = document.getElementById("myInputVisiblea");
//visible input for the users

var a = document.getElementById('testSet1');


//hidden input which your API will be changing
var myInputb = document.getElementById("myInputVisibleb");
//visible input for the users


myInputa.watchDomObject('value', function() {
    console.log(arguments, 'value arguments');
});

myInputb.watchDomObject('checked', function() {
    console.log(arguments, 'checked arguments');
});



a.addEventListener('click', function() {
    myInputa.value = 'yes'
});

var e = document.getElementById('testSet5');
e.addEventListener('click', function() {
   ...