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文件时，我收到错误：

未捕获的TypeError：无法读取null
的属性'innerHTML'

for my：

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函数：否，自调用函数和window.onload之间没有关系，所以如果您使用自助调用功能，则不需要使用window.onload功能。

<强>的window.onload

通过使用window.onload函数，我们只是将事件附加到窗口，我们正在说窗口，当你准备好时（意味着加载HTML文档的所有组件，包括图像，脚本和整个HTML文档）比调用此函数。

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

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

将自调用（IIFE）代码放入外部JS文件时，为什么会出现错误？

1 个答案: