I have used your example in the ESP32 webserver tutorials to display current time & date on a webpage using getElementById(\”dateTime\”) but how could I have the time update on the webpage, say every second, without reloading the web page?
Hi.
Do you want to create a clock on your webpage?
If I understood correctly, you want something like this: https://dev.to/dboatengx/build-a-real-time-changing-digital-clock-using-html-css-javascript-689
Take a look at that link. It explains how to do that.
Regards,
Sara
Thank you Sara! That’s exactly what I wanted and I now have a working digital clock embedded on my front webpage. I managed to modify the linked js code to display the full time-date information that was displayed in the static time display example in your webserver tutorial “getting Started with Javascript” section. Much appreciated.
In case anyone else is interested, in the end I was able to weed it down to just a few lines. In my index.html file I needed:
<div id=”clock”>
<h1 id=”date-time”></h1>
</div>
and in my script.js file I only needed:
window.addEventListener(“load”, () => {
clock();
function clock() {
var todays_date = new Date();
document.getElementById(“date-time”).innerHTML = todays_date;
setTimeout(clock, 1000);
}
});