Adding Javascript to a CMS Page

Question

I am adding a countdown timer to a single CMS page that is counting down to September 20th, 2015.

I put all the javascript functions in js/countdownClock.js

function getTimeRemaining(endtime){
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor( (t/1000) % 60 );
  var minutes = Math.floor( (t/1000/60) % 60 );
  var hours = Math.floor( (t/(1000*60*60)) % 24 );
  var days = Math.floor( t/(1000*60*60*24) );
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime){
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock(){
    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if(t.total<=0){
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock,1000);
}

var deadline = 'September 20 2015 08:59:59 UTC+0800';
initializeClock('clockdiv', deadline);

Then I called the file in the CMS page under the Layout Update XML sections:

<reference name="head">
  <action method="addItem">
    <type>js</type><script>countdownClock.js</script>
  </action>
</reference>

In the Content section of the page I put in:

<div id="clockdiv">
<div><span class="days">.</span>
<div class="smalltext">Days</div>
</div>
<div><span class="hours">.</span>
<div class="smalltext">Hours</div>
</div>
<div><span class="minutes">.</span>
<div class="smalltext">Minutes</div>
</div>
<div><span class="seconds">.</span>
<div class="smalltext">Seconds</div>
</div>
</div>

When I load the page however, only the labels Days, Hours, Minutes, Seconds displays. The javascript is supposed to calculate the time remaining and output the information in the content of the page with the span tags.

Does anyone know where I'm going wrong? Is the page even calling the javascript correctly?

Answer 1

Because you're loading your javascript in the HEAD it's downloading the file and executing the code before the content exists on the page. A simple solution can be found below which would execute your function once the page content was ready to be executed against.

Update the final line of countdownClock.js like so:

jQuery(document).ready(function(){
    initializeClock('clockdiv', deadline);
});