javascript - 为什么将自调用 (IIFE) 代码放入外部 JS 文件时出错？

Question

我写了一个自调用的 JavaScript 代码:

(function assignment12_3() {
    // Your code goes in here.
    var records = openZipCodeStudyRecordSet(),
        zipArray = [],
        zipUnique = [];
    while (records.readNextRecord()) {
        var zips = records.getSampleZipCode();
        zipArray.push(zips);
        zipArray.sort();
    }
    for (var x = 0; x < zipArray.length; x++) {
        if (zipArray[x] !== zipArray[x-1]) {
            zipUnique.push(zipArray[x]);
        }
    }
    var output = document.getElementById('outputDiv');
    for (var y = 0; y < zipUnique.length; y++) {
        output.innerHTML += zipUnique[y] + "<br>";
    }
})();

放入我的 html 中，它运行良好，但是当我将它放入外部 JavaScript 文件时，出现错误:

Uncaught TypeError: Cannot read property 'innerHTML' of null

我的:

output.innerHTML += zipUnique[y] + "<br>";

下面是带有错误示例的图像链接，并突出显示了当我将代码放入外部 js 文件时出现错误的行。

难道不能将自调用函数 (IIFE) 放入外部 JavaScript 文件并在 html 文件中使用吗？为什么我的代码在 HTML 脚本标记中可以完美运行，但在外部 JavaScript 文件中却不行？

Answer 1

可能是在加载 HTML 文档之前运行 JavaScript 代码，因此将所有代码移动到 window.onload 函数中，然后运行代码:

window.onload=function(){
(
    function assignment12_3(){
        // Your code goes in here.
        var records = openZipCodeStudyRecordSet();
        var zipArray = [];
        var zipUnique = [];
    while (records.readNextRecord()) {
        var zips = records.getSampleZipCode();
        zipArray.push(zips);
        zipArray.sort();
    }
    for (var x = 0; x < zipArray.length; x++) {
        if (zipArray[x] !== zipArray[x-1]) {
            zipUnique.push(zipArray[x]);
        }
    }
    var output = document.getElementById('outputDiv');
    for (var y = 0; y < zipUnique.length; y++) {
        output.innerHTML += zipUnique[y] + "<br>";
    }
    }
)();
}

让我知道您在使用上述解决方案后得到了什么。

编辑:

你的 JavaScript 代码何时运行，这取决于你将 JavaScript 代码放在 HTML 文档中的什么位置，无论你将 JavaScript 代码放在外部 JavaScript 文件中，还是将 Script 标签直接放入 HTML 文档中。

请引用我的文章:http://www.javascripthive.info/javascript/adding-javascript-code-to-html/

在使用自调用函数时需要使用window.onload函数: NO，自调用函数与没有关系>window.onload，因此，如果您使用的是自调用函数，则无需使用 window.onload 函数。

window.onload

通过使用 window.onload 函数，我们只是将事件附加到窗口，我们说窗口准备就绪时(意味着加载 HTML 文档的所有组件，包括图片、脚本和整个 HTML 文档)而不是调用此函数。

因此在浏览器中加载完整的 HTML 文档后，窗口将调用我们分配给 window.onload 的函数。

您的问题已解决，因为您的代码写在 window.onload 函数中，并且在加载整个 HTML 文档后调用此函数。因此，您的 outputDiv 已加载并准备好使用 JavaScript 代码进行访问。