Fatal编程技术网
  • javascript/
  • Javascript document.getElementById不'；行不通

Javascript document.getElementById不'；行不通

javascript

Javascript document.getElementById不'；行不通,javascript,element,document,getelementbyid,Javascript,Element,Document,Getelementbyid,我有问题，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

我有问题，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;

var pixs=”“；

对于（var ia=1；ia您需要将JavaScript放在div后面。否则JavaScript将找不到您想要的div，因为它还不存在

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


  • 将JavaScript移到div下面
    • 

  • 将div移到javaScript的上方
    • 

  • 在JavaScript中使用window.onload
    • 

    在JSFIDLE中工作正常，可以尝试将脚本放在div之后，或者使用类似JQuery的
    $（document.ready（）；
    函数
    
关于代码，它确实创建了200000个节点。

    

    我认为问题在于，可能在加载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>

    

    
函数foo（）{
var pixs=“”；
对于（var ia=1；ia

    

    这可以确保，如果DOM已经加载，那么您的函数将首先被执行。
    您可以将一个JS提琴放在一起，指出您的问题吗？JS的美妙之处在于，您可以以工作格式传递有问题的代码。哦，当您在那里时，将HTML附加为字符串确实不是一种处理DOM的好方法。试试看为了更像对待XML一样对待它，使用元素、文本节点等。请不要将类和id命名为相同的名称。很可能，
    在
    之前。JavaScript不会等待文档完成加载，因此它可以在
    存在之前运行。由于OP没有为问题添加标签，因此它是gen通常最好提供一个不需要它的选项。另外，请注意，JSFIDLE的
    onLoad
    选项将帮助代码段成功。使用
    No wrap-in
    选项尝试代码段。正好有200000个节点，这将非常糟糕，确实如此

    <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>