Question

我对JavaScript很陌生，所以我不知道语言的来龙去脉，但我确实对它有一些了解。我创建了一个自调用函数，它将对一组zip代码进行排序，然后将其输出到html文件中的div元素。

不幸的是，输出不会进入div元素，因为函数是在html元素准备好之前执行的，因此它不存在。

无论如何我可以访问函数中的div元素而不必使用Window.Load等吗？

谢谢！点击下面的链接查看我的功能。

Screenshot of function

Answer 1

无论如何，我可以访问其中的div元素函数，而不必使用Window.Load等？

将代码移到html的末尾 - 在有问题的元素之后。例如，在</body>

之后

Answer 2

据我所知，如果那个时刻不存在，你就无法访问DOM。

我知道我知道，不要使用window.onload。但我向你保证，与等待DOM加载然后跟进你的计算不同。

你可以让一个函数评估一些东西，然后实际挂起结果并等待，然后在DOMContentLoaded事件被触发时最终填充innerHTML ......或者也许类似的东西，看看此

<script>
    const calculations = (function () {
        // Super smart calculations...

        var output = "Result of smart calculations";

        function findWhereOutputGoes() {
            return document.getElementById('output-div');
        }

        return {
            output: output,
            findWhereOutputGoes: findWhereOutputGoes,

        }
    })();

    document.addEventListener('DOMContentLoaded', function(){ // Fires as soon as DOM has loaded
        calculations.findWhereOutputGoes().innerHTML = calculations.output;
    });
</script>
<div id="output-div">

</div>

如何在自调用函数中访问HTML元素。

2 个答案: