JSFiddle - React, Tailwind, and code Playground

by rough cheap

HTML

<div class="controls">
  <button id="reload" type="button">Reload</button>
</div>

<div class="event-log">
  <label>Event log:</label>
  <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea>
</div>

<div class="variable">
<h2>
This is variable.
</h2>
</div>

CSS

.variable {
  display: none;
}

.variable.show {
  display: block !important;
}

JavaScript

(function() {
	const log = document.querySelector('.event-log-contents');
  const reload = document.querySelector('#reload');
  
  reload.addEventListener('click', () => {
  	log.textContent = '';
    window.setTimeout(() => {
    	window.location.reload(true);
    }, 200);
  });
  
  window.addEventListener('load', (event) => {
  	log.textContent = log.textContent + 'load\n';
    window.setTimeout(() => {
    	document.querySelector(".variable").classList.remove("show");
    }, 3000);
  });
  
  window.addEventListener('readystatechange', (event) => {
  	log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
  });
  
  window.addEventListener('DOMContentLoaded', (event) => {
  	let variable = document.querySelector(".variable");
    variable.classList.add("show");
    log.textContent = log.textContent + `variable: ${variable}\n`;
  	log.textContent = log.textContent + `DOMContentLoaded\n`;
  });
})();