Countdown Timer Javascript In Line Code External Scripts

Question

I found this piece of code online Countdown Timer

And attempted to implement it on a page but it wasn't counting down. Thanks to all who commented. Here's the NOW WORKING sample code (see below snippet)

  function getTimeRemaining(endtime) { var t = Date.parse(endtime) - Date.parse(new Date()); var seconds = Math.floor((t / 1000) % 60); var minutes = Math.floor((t / 1000 / 60) % 60); var hours = Math.floor((t / (1000 * 60 * 60)) % 24); var days = Math.floor(t / (1000 * 60 * 60 * 24)); return { 'total': t, 'days': days, 'hours': hours, 'minutes': minutes, 'seconds': seconds }; } function initializeClock(id, endtime) { var clock = document.getElementById(id); var daysSpan = clock.querySelector('.days'); var hoursSpan = clock.querySelector('.hours'); var minutesSpan = clock.querySelector('.minutes'); var secondsSpan = clock.querySelector('.seconds'); function updateClock() { var t = getTimeRemaining(endtime); daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ('0' + t.hours).slice(-2); minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); if (t.total <= 0) { clearInterval(timeinterval); } } updateClock(); var timeinterval = setInterval(updateClock, 1000); } var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000); initializeClock('clockdiv', deadline); 

  #clockdiv{ font-family: sans-serif; color: #fff; display: inline-block; font-weight: 100; text-align: center; font-size: 30px; } #clockdiv > div{ padding: 10px; border-radius: 3px; background: #00BF96; display: inline-block; } #clockdiv div > span{ padding: 15px; border-radius: 3px; background: #00816A; display: inline-block; } .smalltext{ padding-top: 5px; font-size: 16px; } 

 <div id="clockdiv" align='center'> <div> <span class="days"></span> <div class="smalltext">Days</div> </div> <div> <span class="hours"></span> <div class="smalltext">Hours</div> </div> <div> <span class="minutes"></span> <div class="smalltext">Minutes</div> </div> <div> <span class="seconds"></span> <div class="smalltext">Seconds</div> </div> </div> 

Perhaps it needs to do a body onload or I'm missing something because when I try the code it just shows empty boxes and no timer.

While there are many great clock plugins, it makes sense to just do this in raw javascipt as the article says:

code will be lightweight because it will have zero external scripts

website will perform better because you won't need to load external scripts and style sheets.

have more control because you will have built the clock to behave exactly the way you want it to (rather than trying to bend a plugin to your will).

It seems like a useful piece of code if it could be made to work with minimal changes. What am I missing?

Thanks!

Answer 1

If clock is null, then your selector #clockdiv is failing. The DOM hasn't been populated yet at the time your script runs: either move the script to the bottom of the body so that the body (including #clockdiv ) exists before the script runs, or save the script in its own .js file and give it a defer attribute, or wrap the whole script in a DOMContentLoaded listener (so it waits for the document to be parsed before running).

Answer 2

Like @Certain Performance said, you are trying to run your JS before the element has been created. The cleanest solution would be to move your JS to it's own file and include it at the bottom of the body tag.

 function getTimeRemaining(endtime) { var t = Date.parse(endtime) - Date.parse(new Date()); var seconds = Math.floor((t / 1000) % 60); var minutes = Math.floor((t / 1000 / 60) % 60); var hours = Math.floor((t / (1000 * 60 * 60)) % 24); var days = Math.floor(t / (1000 * 60 * 60 * 24)); return { 'total': t, 'days': days, 'hours': hours, 'minutes': minutes, 'seconds': seconds }; } function initializeClock(id, endtime) { var clock = document.getElementById(id); var daysSpan = clock.querySelector('.days'); var hoursSpan = clock.querySelector('.hours'); var minutesSpan = clock.querySelector('.minutes'); var secondsSpan = clock.querySelector('.seconds'); function updateClock() { var t = getTimeRemaining(endtime); daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ('0' + t.hours).slice(-2); minutesSpan.innerHTML = ('0' + t.minutes).slice(-2); secondsSpan.innerHTML = ('0' + t.seconds).slice(-2); if (t.total <= 0) { clearInterval(timeinterval); } } updateClock(); var timeinterval = setInterval(updateClock, 1000); } var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000); initializeClock('clockdiv', deadline); 

 body { text-align: center; } #clockdiv { font-family: sans-serif; color: #fff; display: inline-block; font-weight: 100; text-align: center; font-size: 30px; margin: auto; } #clockdiv>div { padding: 10px; border-radius: 3px; background: #00BF96; display: inline-block; } #clockdiv div>span { padding: 15px; border-radius: 3px; background: #00816A; display: inline-block; } .smalltext { padding-top: 5px; font-size: 16px; } 

 <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Countdown timer</title> </head> <body> <!--[if lte IE 9]> <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p> <![endif]--> <h1>Stack Overflow Countdown timer.</h1> <div id="clockdiv" align='center'> <div> <span class="days"></span> <div class="smalltext">Days</div> </div> <div> <span class="hours"></span> <div class="smalltext">Hours</div> </div> <div> <span class="minutes"></span> <div class="smalltext">Minutes</div> </div> <div> <span class="seconds"></span> <div class="smalltext">Seconds</div> </div> </div> <!-- Run at the end of the page --> <script src="js/main.js"></script> </body> </html> 

Answer 3

It is because you are trying to get the DOM element using document.getElementById function before the DOM object was created. Either you move the script code at the bottom of the code or call initializeClock function in DOMContentLoaded or body load or document load or window load event function.