JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<input type='text' id='myInputVisiblea' />
<input type='button' value='Test1' id="testSet1" />
<br>
<input type='checkbox' id='myInputVisibleb' />
<input type='button' value='Test2' id="testSet2" />
<input type='button' value='Test3' id="testSet3" />
<input type='button' value='Test4' id="testSet4" />
<br> check input type text
<br> check input type radiobutton checked
<br> check input type checkbox checked
<br> check textarea
<br>

JavaScript

// @run-at         document-start

(function () {
   var originalDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");

   var descriptorWithChanges = {
      set : function (arg1) {
         console.log("value set: " + arg1);
         originalDescriptor.set.call(this, arg1);
      }
   };

   Object.defineProperty(HTMLInputElement.prototype, "value", descriptorWithChanges);
})();   

(function () {
   var originalDescriptorChecked = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "checked");

   var descriptorWithChangesChecked = {
      set : function (arg1) {
         console.log("value set: " + arg1);
         originalDescriptorChecked.set.call(this, arg1);
      }
   };

   Object.defineProperty(HTMLInputElement.prototype, "checked", descriptorWithChangesChecked);
})();   


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





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


var b = document.getElementById('testSet2');
b.addEventListener('click', function() {
    myInputb.checked = true
});

var c = document.getElementById('testSet3')
c.addEventListener('click', function() {
    myInputb.checked = false
});

var d = document.getElementById('testSet4')
d.addEventListener('click', function() {
    console.log(myInputb.checked, ' myInputb.checked')
});