Question

Ok, so i’ve got the following javascript on my website to countdown timer:

<script type="text/javascript">
function timer(elementid, totaltime, format, color, style, trigger_a, trigger_b, done) {

  var hours = 0; var minutes = 0; var seconds = 0;

  if (totaltime > 0) {

    while (totaltime >= 3600) { hours++; totaltime -= 3600; }
    if (hours < 10) { hours = '0' + hours; }
    while (totaltime >= 60) { minutes++; totaltime -= 60; }
    if (minutes < 10) { minutes = '0' + minutes; }
    seconds = totaltime;
  }

  function display() {

    if (hours == 0 && minutes == 0 && seconds == 0) {

      if (trigger_a == "reload") { location.href="page.php"; }
      else if (trigger_a == "enable" && trigger_b != "") { document.getElementById(trigger_b).disabled = false; }
      else { /* do nothing */ }

      document.getElementById(elementid).innerHTML = done;      
    }

    else {

      var output = '';

      if (seconds > 0 && seconds <= 59) { seconds--; if (hours < 10) { hours = '0' + hours; } }
      else {
        if (minutes > 0 && minutes <= 59) { minutes--; if (minutes < 10) { minutes = '0' + minutes; } }
        else {
          if (hours > 0) { hours--; minutes = 59; }
        }
        seconds = 59;
      }

      if (hours > 0) {        
        if (format == 'long') { output += hours + " hours "; }
        else if (format == 'small') { output += hours + "h "; }
      }

      if (minutes > 0) {       
        if (format == 'long') { output += minutes + " minutes "; }
        else if (format == 'small') { output += minutes + 'm ';}
      }

      if (seconds < 10) { seconds = '0' + seconds; }
      if (format == 'long') { output += seconds + ' seconds'; }
      else if (format == 'small') { output += seconds + 's'; }

      if (color == '') {

        if (style == 'bold') { document.getElementById(elementid).innerHTML = '<b>' + output + '</b>'; }
        else { document.getElementById(elementid).innerHTML = output; }
      }

      else {

        if (style == 'bold') { document.getElementById(elementid).innerHTML = '<font color='+color+'><b>' + output + '</b></font>'; }
        else { document.getElementById(elementid).innerHTML = '<font color='+color+'>' + output + '</font>'; }
      }      
      setTimeout(display, 1000);
    }
  }
  display();  
}
</script>

I add a span box like this:

<?php
$time_left = $from_database['time_left']; //timestamp;
?>
<span id="test"></span>
<script>
timer("test", "<?php echo $time_left - Time(); ?>", "long", "", "", "enable", "unlock_this", "Done");
</script>

<input type="submit" id="unlock_this" <?php if ($time_left - Time() > 0) { echo 'disabled'; } ?> />

The problem is, that when I refresh this page (after $time_left), the ‘Done’ message is not being displayed and I get a javascript error (document.getElementById = null) which directs back to

else if (trigger_a == "enable" && trigger_b != "") { document.getElementById(trigger_b).disabled = false; }

It’s probably just a little thing, but i can’t figure out what i’ve done wrong, so please help.

Answer 1

It looks as though the problem is simply that you execute the timer function before the input with the unlock_this id has had a chance to load. I realise you’ve put a delay in with the setTimeout call of display but have you tried putting the script below the input element?

Or better still calling timer when the whole window has loaded? The easiest way to do the second of these options would be:

window.onload = function () {
    timer("test", "<?php echo $time_left; ?>", "long", "", "", "enable", "unlock_this", "Done");
};

But you are already using the onload property of the window, you will need to load it in a smarter way (either by using a library like JQuery, or by safeguarding existing functions with a wrapper function).