IE Error : Unable to set value of the property 'innerHTML': object is null or undefined

Question

This simple piece of code (progress bar) works fine everywhere except IE (tried 9 and 8) :

      <!-- Progress bar holder -->
      <div id="progress" style="width:500px;border:1px solid #eee;"></div>
      <!-- Progress information -->
      <div id="information" style="width"></div>

      <?php

      // Total processes
      $total = 10;

      // Loop through process
      for($i=1; $i<=$total; $i++){
      // Calculate the percentation
      $percent = intval($i/$total * 100)."%";

     // Javascript for updating the progress bar and information
     echo '<script language="javascript">
     document.getElementById("progress").innerHTML="<div style=\"width:'.$percent.';   background-color:#ddd;\">&nbsp;</div>";
document.getElementById("information").innerHTML="'.$i.' row(s) processed.";
</script>';

// This is for the buffer achieve the minimum size in order to flush data
echo str_repeat(' ',1024*64);

// Send output to browser immediately
flush();

// Sleep one second so we can see the delay
sleep(1);
}

// Tell user that the process is completed
echo '<script language="javascript">document.getElementById("information").innerHTML="Process completed"</script>';

 ?>

IE shows the error " Unable to set value of the property 'innerHTML': object is null or undefined ". The problem seems to be here :

    document.getElementById("progress").innerHTML="<div style=\"width:'.$percent.';background-color:#ddd;\">&nbsp;</div>";

div in this case doesn't work properly in IE (at least as far as I understood)

Tried to fix it by myself, but it's too complicated for me. Any help will be much appreciated. Thanks )

Solution

the document is probably not loaded yet.

try

window.onload = function() {
    // your code
}

or I always use jQuery

$(function () {
    // your code
});