JS加载优化后GetSearchResults()函数未定义问题求助

问题原因 #

你把GetSearchResults()函数定义在了DOMContentLoaded的回调函数内部，这个函数处于局部作用域中。而HTML按钮的onclick="GetSearchResults()"是在全局作用域下查找函数，所以点击时会提示“函数未定义”。

解决方案 #

方案1：将函数挂载到全局作用域

在DOMContentLoaded回调内部，把GetSearchResults赋值给window对象，让它成为全局可访问的函数：

document.addEventListener("DOMContentLoaded", function () {
    // 省略其他已有代码...

    function GetSearchResults() {
        var name = document.getElementById("softwareName").value;
        var procName = document.getElementById("processName").value;

        if (name !== "") {
            getSoftwareData(name);
        }
        if (procName !== "") {
            getProcessData(procName, name);
        }
    }

    // 将函数挂载到全局作用域
    window.GetSearchResults = GetSearchResults;
});

方案2：移除inline onclick，用事件监听绑定（推荐）

这种方式能避免污染全局作用域，同时实现HTML与JS逻辑分离：

1. 修改HTML中的搜索按钮，移除onclick属性并添加ID：

<button type="button" id="searchBtn">Search</button>

2. 在DOMContentLoaded回调内部绑定点击事件：

document.addEventListener("DOMContentLoaded", function () {
    // 省略其他已有代码...

    function GetSearchResults() {
        var name = document.getElementById("softwareName").value;
        var procName = document.getElementById("processName").value;

        if (name !== "") {
            getSoftwareData(name);
        }
        if (procName !== "") {
            getProcessData(procName, name);
        }
    }

    // 给搜索按钮绑定点击事件
    document.getElementById('searchBtn').addEventListener('click', GetSearchResults);
});

内容的提问来源于stack exchange，提问作者JWright92