Question

我遇到了问题，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>

任何人都可以帮助我吗？

Answer 1

你需要把JavaScript放在div后面。否则，JavaScript将无法找到您想要的div，因为它尚未存在。

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

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

Answer 2

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

关于严格的代码，它确实创建了 200 000 节点。 enter image description here

JSFiddle link

Answer 3

我认为问题是，也许你在加载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已经加载，则首先执行您的函数。

document.getElementById不起作用

3 个答案: