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

JavaScript and AJAX Forum

    
document.getelementbyid().innerhtml null error
cybernoob




msg:4428224
 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">
<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




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

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




msg:4428414
 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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved