JSFiddle - React, Tailwind, and code Playground

by smotchkkiss

HTML

<button id="my-button">The Time is?</button>

<script type="text/javascript">
  var b = document.getElementById("my-button");

  function displayTime(elem) {
    elem.innerHTML = Date();
  }

  b.addEventListener("click", function(event) {
    displayTime(this);
  });

  // fake the click
  b.dispatchEvent(new Event("click"));
</script>

<hr/>

<p>The time will stop updating after you click submit</p>

<form id="my-form">
    <input name="time" />
    <input type="submit" />
</form>

<script type="text/javascript">
    var f = document.getElementById("my-form");
    
    function updateTime() {
      f.time.value = Date();
    }
    
    var interval = setInterval(updateTime, 1000);
    
    f.addEventListener("submit", function(event) {
      clearInterval(interval);  
      alert("the submitted time is: " + f.time.value);
      event.preventDefault();
    });
    
    // prepopulate form
    updateTime();
</script>

CSS

form input[name=time] {
    width: 200px;
}