1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 8:08 pm May 13, 2026

Forum Moderators: open

Message Too Old, No Replies

document.getelementbyid().innerhtml null error

         

cybernoob

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

10+ Year Member



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">
<head>

<title>Countdown</title>

<style type="text/css">

body {
color:#000000;
background-color:#FFFFFF;
}


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

</style>

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


setInterval("launchCountdown(targetdate,currentdate)",1000);



</script>

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


<center><div id="countdown">

</div> </center>

</body>
</html>

Fotiman

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

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Welcome to WebmasterWorld.

onload="setInterval("

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

cybernoob

3:50 am on Mar 13, 2012 (gmt 0)

10+ Year Member



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

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 8:08 pm May 13, 2026