document.getElementById 不起作用[重复]答案

【问题标题】：document.getElementById doesn't work [duplicate]document.getElementById 不起作用[重复]
【发布时间】：2014-08-02 16:52:28
【问题描述】：

我有一个问题，document.getElementById 不起作用。我收到此错误：“'null' 不是对象（评估 document.getElementById("alls").innerHTML = pixs）”。

这是我的代码：

Javascript：

var pixs = "";
for(var ia = 1; ia <= 400 * 500; ia++) {
  var r = Math.floor(Math.random() * 257);
  var g = Math.floor(Math.random() * 257);
  var b = Math.floor(Math.random() * 257);
  pixs += "<div class='pix' style='background-color:rgb("+r+","+g+","+b+");'></div>";
}
document.getElementById("alls").innerHTML = pixs;

主体：

<div id="alls"></div>

谁能帮帮我？

【问题讨论】：

能否请您整理一个 JS fiddle 来表明您的问题？ JS 的美妙之处在于，您可以按字面意思以工作格式传递有问题的代码。
哦，当您在那里时，将 HTML 附加为字符串确实不是进行 DOM 操作的好方法。尝试像对待 XML 一样对待它，包括元素、文本节点等。
你能不能不要把类和id命名为同一个东西。
很有可能，<script> 在 <div> 之前。 JavaScript 不会等待文档完成加载，因此它可以在<div> 存在之前运行。 window.onload.

标签： javascript element document getelementbyid

【解决方案1】：

您需要将 JavaScript 放在 div 后面。否则 JavaScript 将找不到您想要的 div，因为它还不存在。

如果是这种情况，您有 3 个选择：

将 JavaScript 移到 div 下
将 div 移到 javaScript 上方
在 JavaScript 中使用 window.onload

【讨论】：

【解决方案2】：

我认为问题是，也许你在加载 DOM 之前调用它。如果你这样做，你可以解决这个问题：

<html>
    <head>
        <script>
            function foo() {
                var pixs = "";
                for(var ia = 1; ia <= 400 * 500; ia++) {
                    var r = Math.floor(Math.random() * 257);
                    var g = Math.floor(Math.random() * 257);
                    var b = Math.floor(Math.random() * 257);
                    pixs += "<div class='pix' style='background-color:rgb("+r+","+g+","+b+");'></div>";
                }
                document.getElementById("alls").innerHTML = pixs;
            }
        </script>
    </head>
    <body onload="foo();">
        <!-- ... -->
        <div id="alls" class="alls"></div>
        <!-- ... -->
    </body>
</html>

如果 DOM 已经加载，这可以确保您的函数首先执行。

【讨论】：

【解决方案3】：

在 JSFiddle 中工作得很好，尝试将脚本放在 div 之后，或者使用类似 JQuery 的 $(document).ready(); 函数。

关于代码，它确实创建了 200 000 个节点。

JSFiddle link

【讨论】：

由于 OP 没有为jquery 标记问题，因此通常最好提供一个不需要它的选项。
另外，请注意 JSFiddle 的 onLoad 选项将帮助 sn-ps 成功。尝试带有 No wrap - in <head> 选项的 sn-ps。
正好有 200 000 个节点，这会非常滞后
kutj.es/b75-ja 确实如此