JSFiddle - React, Tailwind, and code Playground

by ksoncan34

HTML

<input id="hidden-value" type="hidden" value="0"/>
<button id="change-button">
Click Me
</button>
<div>Value: <span id="display"></span>
</div>

JavaScript

const displayEl = document.querySelector('#display');
const hiddenValueEl = document.querySelector('#hidden-value');
debugger;
displayEl.innerText = '0';
new MutationObserver((mutations) => {
    if(mutations[0].attributeName == "value") {
   		displayEl.innerText = mutations[0].target.value;     
    }
}).observe(hiddenValueEl, {
    attributes: true
});

document.querySelector('#change-button').addEventListener('click', e => {
	e.preventDefault();
  hiddenValueEl.value = 1;
});