Question

我首先这样做了：

<script>
    function result2() {
        document.write("...");
    }
    function result1() {
        document.write("..");
        setTimeout(result2, 1000);
    }
    document.write(".");
    setTimeout(result1, 1000);
</script>
<div id="body"></div>

setTimeout()在所有的九十九次中都没有工作，所以我很惊讶它看起来很有效，即使它在最后发生了故障。但它并没有像我以前想要的那样工作，所以我重新写了一点脚本就是这样：

<script>
    function result2() {
        document.getElementById("body").innerHTML = "...";
    }
    function result1() {
        document.getElementById("body").innerHTML = "..";
        setTimeout(result2, 1000);
    }
    document.getElementById("body").innerHTML = ".";
    setTimeout(result1, 1000);
</script>
<div id="body"></div>

但一切都没有发生，它只是给了我一个空白的页面......所以我尝试setInterval()，但在这里，它没有工作。所以，请帮助我，我该如何解决这个问题呢？

Answer 1

问题是当代码执行时，元素在DOM中不可用。您可以使用以下任何一种解决方案

将<script>移到<body的末尾，这样，当代码运行时，元素在DOM中可用
在DOMContentLoaded事件回调

<script>
    function result2() {
        document.getElementById("body").innerHTML = "...";
    }

    function result1() {
        document.getElementById("body").innerHTML = "..";
        setInterval(result2, 1000);
    }

    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById("body").innerHTML = ".";
        setInterval(result1, 1000);
    });

</script>
<div id="body"></div>

Answer 2

在body标签的末尾添加您的脚本，它应该可以正常工作

function result2() {
   document.getElementById("body").innerHTML = "...";
    }

function result1() {
    document.getElementById("body").innerHTML = "..";
        setInterval(result2, 1000);
    }

 document.getElementById("body").innerHTML = ".";
    setInterval(result1, 1000);

<div id="body"></div>

setTimeout（）和getElementById（）不能一起工作

2 个答案: