IE 错误：无法设置属性“innerHTML”的值：对象为 null 或未定义

发布于 2024-12-25 17:50:10 字数 1573 浏览 2 评论 0原文

这段简单的代码（进度条）在除 IE 之外的任何地方都可以正常工作（尝试过 9 和 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 显示错误“无法设置属性‘innerHTML’的值：对象为 null 或未定义”。问题似乎出在这里：

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

这种情况下的 div 在 IE 中无法正常工作（至少据我所知）

尝试自己修复它，但这对我来说太复杂了。任何帮助将不胜感激。谢谢）

原文

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;\"> </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;\"> </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 )

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

水水月牙 2025-01-01 17:50:10

该文档可能尚未加载。

尝试一下

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

，否则我总是使用 jQuery

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

the document is probably not loaded yet.

try

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

or I always use jQuery

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

回复收藏 0 原文

江南烟雨〆相思醉 2025-01-01 17:50:10

该解决方案最有可能确保您的文档具有正确的结构。

这不起作用：

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

这起作用：

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

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>

回复收藏 0 原文

~没有更多了~