如何在自調用函數中訪問HTML元素。

Question

我對JavaScript非常陌生，所以我不了解該語言的來龍去脈，但我確實對此有所了解。 我創建了一個自調用函數，該函數將對郵政編碼數組進行排序，然后將其輸出到html文件中的div元素。

不幸的是，輸出不會進入div元素，因為該函數是在html元素就緒之前執行的，因此它不存在。

無論如何，我無需使用Window.Load等就可以訪問函數中的div元素？

謝謝！ 點擊下面的鏈接查看我的功能。

功能截圖

Answer 1

無論如何，我無需使用Window.Load等就可以訪問函數中的div元素？

只需將代碼移到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>