homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

document.getelementbyid().innerhtml null error

Msg#: 4428222 posted 6:16 pm on Mar 12, 2012 (gmt 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>




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

Msg#: 4428222 posted 2:10 am on Mar 13, 2012 (gmt 0)

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


Msg#: 4428222 posted 3:50 am on Mar 13, 2012 (gmt 0)

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved