CODEWITHSUNDEEP
internet-explorerinnerhtml
Mary N
Mary N

Reputation: 117

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

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 )

Upvotes: 3

Views: 12331

Answers (2)

TheVig
TheVig

Reputation: 1

The solution is most likely to ensure your document has the correct structure.

This does not work :

<div id="content"></div>
<script>
document.getElementById('content').innerHTML="HELLO WORLD";
</script>

This does work:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
    <div id="content"></div>
    <script>
    document.getElementById('content').innerHTML="HELLO WORLD";
    </script>
    </body>
</html>

Upvotes: 0

arahaya
arahaya

Reputation: 1020

the document is probably not loaded yet.

try

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

or I always use jQuery

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

Upvotes: 1

Related Questions