Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

document.getelementbyid().innerhtml null error

6:16 pm on Mar 12, 2012 (gmt 0)

New User

5+ Year Member

joined:Mar 12, 2012
votes: 0

im trying to do a countdown ticker till fall and cant get it to dynamically "tick" aka update every second.

i asked my professor and he doesnt know why, any help would be greatly appreciated! :)

<html lang="en">


<style type="text/css">

body {

#countdown{border:solid 2px black; text-align:center; width:25%;


<script type="text/javascript">

var targetdate= new Date('1 September 2012');

var currentdate= new Date();

function launchCountdown(targetdate,currentdate){
var days=Math.floor((targetdate.getTime()-currentdate.getTime())/(24*1000*60*60));
var hours=Math.floor((targetdate.getTime()-currentdate.getTime())/(1000*60*60))-(days*24);
var minutes=Math.floor(((targetdate.getTime()-currentdate.getTime())/(1000*60))-(days*24*60)-(hours*60));
var seconds=Math.floor(((targetdate.getTime()-currentdate.getTime())/(1000))-(days*24*60*60)-(hours*60*60)-(minutes*60));
document.getElementById('countdown').innerHTML="T-Minus "+days+":"+hours+":"+minutes+":"+seconds+" until September 1st, 2012";



<body onload="setInterval("launchCountdown(targetdate,currentdate)",1000);">
<div id="container">

<center><div id="countdown">

</div> </center>

2:10 am on Mar 13, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5007
votes: 21

Welcome to WebmasterWorld.


Note, that second quote will end this string. So your interval is never going to start. But you've got a setInterval call in your script already, so just delete this (it's best to avoid putting event handlers inline in your markup anyway).

Next, you're only creating currentdate once when the page loads. You're never incrementing it, therefore your countdown won't "tick" :) Here's a suggestion... modify your function to create a new Date every time the function is called. Alternatively, create a separate function which handles creating the Date, which then calls launchCountdown, and call setInterval on that function instead. For example:

var targetdate = new Date('1 September 2012');

function tickFallCountdown() {
var currentdate = new Date();
launchCountdown(targetdate, currentdate);

setInterval(tickFallCountdown, 1000);

Side note, it's best to avoid calling setTimeout and setInterval with quoted strings. Instead, pass a function reference. For example, in the code above I passed tickFallCountdown (the function reference) to setInterval instead of "tickFallCountdown()"

Also, in your launchCountdown method, you're calling targetdate.getTime() and currentdate.getTime() over and over... so that's a good opportunity to use a variable.

function launchCountdown(targetdate,currentdate){
var targetdateTime = targetdate.getTime(),
currentdateTime = currentdate.getTime(),
days = Math.floor((targetdateTime - currentdateTime)/(24*1000*60*60)),
hours = Math.floor((targetdateTime - currentdateTime)/(1000*60*60)) - (days*24),
minutes = Math.floor(((targetdateTime - currentdateTime)/(1000*60)) - (days*24*60) - (hours*60)),
seconds = Math.floor(((targetdateTime - currentdateTime)/(1000)) - (days*24*60*60) - (hours*60*60) - (minutes*60));
document.getElementById('countdown').innerHTML="T-Minus "+days+":"+hours+":"+minutes+":"+seconds+" until September 1st, 2012";
3:50 am on Mar 13, 2012 (gmt 0)

New User

5+ Year Member

joined:Mar 12, 2012
votes: 0

thanks that was incredibly helpful and it makes sense how my problem was the currentdate initializing once and remaining the same!

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members