无法将 JS 文件包含到 HTML 中

Question

我的文件结构简单，包含 HTML 和 JS 文件，如下所示：

templates/
 - index.html
 - menuselector.js

这是我要导入 HTML 的函数示例：

export function getTypeOfClient() {
    const select = document.getElementById('inputGroupSelect02');
    const value = select.options[select.selectedIndex].value;
    if (value === '1') {
        document.getElementById('person').style.display = "block";
        document.getElementById('company').style.display = "none";
    } else if (value === '2') {
        document.getElementById('company').style.display = "block"
        document.getElementById('person').style.display = "none";
    } else {
        document.getElementById('person').style.display = "none";
        document.getElementById('company').style.display = "none";
    }
}

以下是使用此函数的 HTML 代码示例：

<select class="form-select" id="inputGroupSelect03" onchange="getTypeOfClient()">
     <option value="0" selected>Choose...</option>
     <option value="1">Person</option>
     <option value="2">Company</option>
</select>

当我在script 标签中编写代码时，一切正常，但我决定将此代码导出到 JS 文件中以使其更干净。

我将它导入到这样的文件中 - <script type="text/javascript" src="menuselector.js"></script>

这就是问题所在。每次在控制台中我得到 404 并没有找到这个文件。我试图在页眉、页脚、正文等中导入它，但它不起作用。我做错了什么？

Answer 1

您不能将 ES 模块用作内联事件侦听器 onchange="getTypeOfClient()" 因为它们没有被添加到全局范围（这是模块的全部意义）。

使用 window.getTypeOfClient = getTypeOfClient 将其显式分配给全局范围，或者如果您不想要 ES 模块，请删除 export 关键字。

话虽如此，使用内联事件侦听器非常糟糕，原因有很多；而是使用 Javascript 来定义或添加监听器。