title: Javascript - document.write() is working but document.innerHTML isn't
body: <p>I have a page with a javascript countdown.  The countdown is working, just fine, but, when it reaches the countdown time, it starts counting backwards.  It should change the content of <code>#nextinternetbroadcast</code>.  It does change the content, if I use <code>document.write()</code>, but it overwrites the page (so I know the <code>if</code> is working).  For some reason, it simply is ignoring the <code>clearTimeout()</code> and <code>innerHTML</code> portion.</p>
  
  <p>HTML (edited for terseness):</p>
  
  <pre><code>&lt;div id="nextinternetbroadcast" class="link"&gt;&lt;/div&gt;
  &lt;!-- page specific javascripts --&gt;
  &lt;script&gt;
  // set a global javascript variable
  var nextlivebroadcast;
  // tell the function where the JSON data is
  fetchJSONFile('http://www.flcbranson.org/api/livebroadcast', function(data){
      // do something with your data
      // alert(JSON.stringify(data));
      // alert(data.datetime + ', ' + data.status);
      nextlivebroadcast = data.nextbroadcast;
  });
  // see if the global variable is still set (would say "undefined" if using an asychronous connection)
  //alert(nextlivebroadcast);
  
  // live broadcast countdown
  cdtd(nextlivebroadcast);
  &lt;/script&gt;
  </code></pre>
  
  <p>JavaScript (edited for terseness):</p>
  
  <pre><code>// generic get JSON data function
  function fetchJSONFile(path, callback) {
      var httpRequest = new XMLHttpRequest();
      httpRequest.onreadystatechange = function() {
          if (httpRequest.readyState === 4) {
              if (httpRequest.status === 200) {
                  var data = JSON.parse(httpRequest.responseText);
                  if (callback) callback(data);
              }
          }
      };
      // false tells it to be synchronous instead of asynchronous
      httpRequest.open('GET', path, false);
      httpRequest.send(); 
  }
  
  // start javascript countdown (http://www.developphp.com/view.php?tid=1248)
  // don't forget to pass the broadcast variable
  function cdtd(broadcast) {
      // just about any standard date format is accepted
      var nextinternetbroadcast = new Date(broadcast);
      var now = new Date();
      var timeDiff = nextinternetbroadcast.getTime() - now.getTime();
      if (timeDiff &lt;= 0) {
          clearTimeout(timer);
          document.getElementById('nextinternetbroadcast').innerHTML = '&lt;a href="javscript:openVideo(' + livepublishingpoint + ');"&gt;Join live service now&lt;\/a&gt;';
          // document.innerHTML isn't working but document.write is (but it overwrites the whole page)
          //document.write('Something');
      }
      var seconds = Math.floor(timeDiff / 1000);
      var minutes = Math.floor(seconds / 60);
      var hours = Math.floor(minutes / 60);
      var days = Math.floor(hours / 24);
      hours %= 24;
      minutes %= 60;
      seconds %= 60;
      document.getElementById('nextinternetbroadcast').className += " disabled";
      document.getElementById('nextinternetbroadcast').innerHTML = '&lt;span class="days"&gt;' + days + '&lt;/span&gt;&lt;span class="hours"&gt;' + hours + '&lt;/span&gt;&lt;span class="minutes"&gt;' + minutes + '&lt;/span&gt;&lt;span class="seconds"&gt;' + seconds + '&lt;/span&gt;';
      // loop the function every second
      var timer = setTimeout(function() { cdtd(broadcast); }, 1000);
  }
  </code></pre>
  
  <p>Am I doing something incorrectly?  I, certainly, am not seeing it.</p>
  
  <p><strong>Edit (showing the fix in the JavaScript - thanks to Bergi)...</strong></p>
  
  <pre><code>// start javascript countdown (http://www.developphp.com/view.php?tid=1248)
  // don't forget to pass the broadcast variable
  function cdtd(broadcast) {
      // just about any standard date format is accepted
      var nextinternetbroadcast = new Date(broadcast);
      var now = new Date();
      var timeDiff = nextinternetbroadcast.getTime() - now.getTime();
      if (timeDiff &lt;= 0) {
          document.getElementById('nextinternetbroadcast').innerHTML = '&lt;a href="javscript:openVideo(' + livepublishingpoint + ');"&gt;Join live service now&lt;\/a&gt;';
          // document.innerHTML isn't working but document.write is (but it overwrites the whole page)
          //document.write('Something');
      } else {
          var seconds = Math.floor(timeDiff / 1000);
          var minutes = Math.floor(seconds / 60);
          var hours = Math.floor(minutes / 60);
          var days = Math.floor(hours / 24);
          hours %= 24;
          minutes %= 60;
          seconds %= 60;
          document.getElementById('nextinternetbroadcast').className += " disabled";
          document.getElementById('nextinternetbroadcast').innerHTML = '&lt;span class="days"&gt;' + days + '&lt;/span&gt;&lt;span class="hours"&gt;' + hours + '&lt;/span&gt;&lt;span class="minutes"&gt;' + minutes + '&lt;/span&gt;&lt;span class="seconds"&gt;' + seconds + '&lt;/span&gt;';
          // loop the function every second
          setTimeout(function() { cdtd(broadcast); }, 1000);
      }
  }
  </code></pre>