• Skip to main content
  • Skip to primary sidebar

RNTLab.com

The Ultimate Shortcut to Learn Electronics and Programming with Open Source Hardware and Software

  • Courses
  • Forum
    • Forum
    • Ask Question
  • Shop
  • Account
  • Blog
  • Login

getElementById(\"dateTime\") realtime updates in ESP8266 webserver without page reload?

Q&A Forum › Category: ESP8266 › getElementById(\"dateTime\") realtime updates in ESP8266 webserver without page reload?
0 Vote Up Vote Down
Roger Wilson asked 2 years ago

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? 

Question Tags: webpage updates without page reload
4 Answers
0 Vote Up Vote Down
Sara Santos Staff answered 2 years ago

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

0 Vote Up Vote Down
Roger Wilson answered 2 years ago

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. 

0 Vote Up Vote Down
Roger Wilson answered 2 years ago

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);
  }
});

 

0 Vote Up Vote Down
Sara Santos Staff answered 2 years ago

That’s great.
A simple and concise solution.
Thank you so much for sharing.
I’ll mark this issue as resolved, if you need further help, you just need to open a new question in our forum.
Regards,
SAra

Primary Sidebar

Login to Ask or Answer Questions

This Forum is private and it’s only available for members enrolled in our Courses.

Login »

Latest Course Updates

  • [eBook Updated] Learn Raspberry Pi Pico/Pico W with MicroPython eBook – Version 1.2 May 26, 2025
  • [New Edition] Build ESP32-CAM Projects eBook – 2nd Edition April 16, 2025

You must be logged in to view this content.

Contact Support - Refunds - Privacy - Terms - MakerAdvisor.com - Member Login

Copyright © 2013-2025 · RandomNerdTutorials.com · All Rights Reserved

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.