JSFiddle - React, Tailwind, and code Playground

by Filipe Tedim

HTML

<div id="header"></div>

<!-- Display date in paragraph -->
<button onclick="getElementById('demo').innerHTML=Date()">The time is? (from innerhtml)</button>
<p id="demo"></p>

<!-- Display date by calling a JS function -->
<button id="button2">The time is? (from javascript)</button>
<p id="demo2"></p>

<!-- Display date inside "this" button -->
<button onclick="this.innerHTML=Date()">The time is? (display in button)</button>
<p id="demo3"></p>

CSS

#demo {
        color:red;
         }
    #demo2 {
        color:blue;
        }

JavaScript

function displayDate() {
    document.getElementById("demo2").innerHTML = Date();
}

var savedate = Date();
document.getElementById('header').innerHTML = "You loaded the page at: "+savedate;

constantDate = function() {
    var date = Date();
    var timetext = "<br />Updated time is: "+date;
    document.getElementById("demo3").innerHTML = timetext;
}

function checkDate() {
    setInterval(function(){ constantDate(); }, 10);
}

checkDate();

/* On click event for button 2 */
var button2 = document.getElementById('button2');
button2.onclick = function() {
    displayDate();   
}