Unable to console.log HTML that my method inserts into DOM

Question

I'm making a simple clock app that displays the current time as a way of practicing my JS in combination with HTML & CSS (I'm quite new to coding).

My code works fine, but I'm confused about an unexpected result I got when experimenting. I created a class, instantiated it, and then tried to print the inner HTML that my display() method was inserting into a pre-existing div (id="time").

See below:

 class Clock { constructor() { this.date = new Date; this.day = this.date.getDate(); this.secs = this.date.getSeconds(); this.mins = this.date.getMinutes(); this.hours = this.date.getHours(); } update(increment) { this.secs += increment; if (this.secs >= 60) { this.secs = this.secs - 60; this.mins++; } if (this.mins >= 60) { this.mins = 0; this.hours++; } if (this.hours >= 24) { this.hours = 0; } } display() { this.update(1); let HMS = [this.hours, this.mins, this.secs].map(item => item < 10? `0${item}`: item); document.getElementById('time').innerHTML = `${HMS[0]}: ${HMS[1]}: ${HMS[2]}`; } run() { setInterval(this.display.bind(this), 1000); } } // TESTING let clock = new Clock; // Create new clock instance clock.run(); // Clock is running let time = document.getElementById('time'); // Retrieving element that contains the time console.log(time.innerHTML);

 <div id="time"></div>

Gives empty string? Why does it not log the HTML I inserted in my display() method?

As above, I don't understand why the HTML that's inserted into my 'time' div as part of the display() method isn't recognized when I console.log it. I feel there's a concept that I'm not grasping in this example, and I can't figure out what it is.

Could someone please help explain it?

Many thanks!

Answer 1

setInterval does not fire immediately, it will only start firing after the first delay (1 second).

As such at the moment your console.log fires before there is anything within the time div.

One way around this is to call this.display and then set the setInterval .

Example to demonstrate the current problem

In this example I have added some text inside the time div, you will see when you run the example that text displays for a second and is also logged to the console.

I then log the time div contents 1.5 seconds later and it then shows the current time.

 class Clock { constructor() { this.date = new Date; this.day = this.date.getDate(); this.secs = this.date.getSeconds(); this.mins = this.date.getMinutes(); this.hours = this.date.getHours(); } update(increment) { this.secs += increment; if (this.secs >= 60) { this.secs = this.secs - 60; this.mins++; } if (this.mins >= 60) { this.mins = 0; this.hours++; } if (this.hours >= 24) { this.hours = 0; } } display() { this.update(1); let HMS = [this.hours, this.mins, this.secs].map(item => item < 10? `0${item}`: item); document.getElementById('time').innerHTML = `${HMS[0]}: ${HMS[1]}: ${HMS[2]}`; } run() { setInterval(this.display.bind(this), 1000); } } // TESTING let clock = new Clock; // Create new clock instance clock.run(); // Clock is running let time = document.getElementById('time'); // Retrieving element that contains the time console.log(time.innerHTML); setTimeout(function(){ console.log(time.innerHTML); }, 1500);

 <div id="time">Not Updated Yet</div>

Example to demonstrate for to fix the issue

In this example all I do is call the display() function immediately within your run function and then set up the setInterval . This way the time is set immediately and so can be logged to the console.

 class Clock { constructor() { this.date = new Date; this.day = this.date.getDate(); this.secs = this.date.getSeconds(); this.mins = this.date.getMinutes(); this.hours = this.date.getHours(); } update(increment) { this.secs += increment; if (this.secs >= 60) { this.secs = this.secs - 60; this.mins++; } if (this.mins >= 60) { this.mins = 0; this.hours++; } if (this.hours >= 24) { this.hours = 0; } } display() { this.update(1); let HMS = [this.hours, this.mins, this.secs].map(item => item < 10? `0${item}`: item); document.getElementById('time').innerHTML = `${HMS[0]}: ${HMS[1]}: ${HMS[2]}`; } run() { this.display(); setInterval(this.display.bind(this), 1000); } } // TESTING let clock = new Clock; // Create new clock instance clock.run(); // Clock is running let time = document.getElementById('time'); // Retrieving element that contains the time console.log(time.innerHTML);

 <div id="time"></div>

Answer 2

 class Clock { constructor() { this.date = new Date; this.day = this.date.getDate(); this.secs = this.date.getSeconds(); this.mins = this.date.getMinutes(); this.hours = this.date.getHours(); } update(increment) { this.secs += increment; if (this.secs >= 60) { this.secs = this.secs - 60; this.mins++; } if (this.mins >= 60) { this.mins = 0; this.hours++; } if (this.hours >= 24) { this.hours = 0; } } display() { this.update(1); let HMS = [this.hours, this.mins, this.secs].map(item => item < 10? `0${item}`: item); document.getElementById('time').innerHTML = `${HMS[0]}: ${HMS[1]}: ${HMS[2]}`; } run() { setInterval(this.display.bind(this), 1000); } } // TESTING let clock = new Clock; // Create new clock instance clock.run(); // Clock is running let time = document.getElementById('time'); // Retrieving element that contains the time console.log(time);

 <div id="time"></div>