如何将外部JavaScript文件引入index.html？内联脚本正常外部加载异常

尝试将JavaScript代码从内联改为外部文件引入HTML后功能失效，但内联时可正常运行。以下是相关代码及项目目录结构：

index.html代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
    <link href="./static/css/index.css" type="text/css" rel="stylesheet">
    <script src="../scripts/index.js" type="text/javascript" defer></script>
</head>

<body>
    <input type="text" id="myInput" class="carrierinput" onkeyup="myCarriers()" placeholder="   Search for LTL Carriers...">
    <ul id="myUL">
        <li><button type="button" class="collapsible">Central Transport</button>
            <div class="content">
            </div> 
        </li>
    </ul>
</body>
</html>

index.js代码 #

function myCarriers() {
     // 业务代码
}

项目目录结构 #

• 项目根目录
  • static
    • css
      • index.css
    • scripts
      • index.js
  • templates
    • index.html

问题原因与解决 #

核心问题：路径错误 #

index.html位于templates目录下，当前引入路径../scripts/index.js指向的是根目录下的scripts文件夹，但实际scripts在static目录内，路径不匹配导致JS文件未成功加载。

修正方案 #

1. 修改JS引入路径
   将<script>标签的src属性改为正确路径：

<script src="../static/scripts/index.js" type="text/javascript" defer></script>

2. 优化事件绑定方式（可选）
   内联事件绑定依赖全局作用域，建议改用事件监听的方式，避免作用域相关问题：

// index.js中修改为
document.addEventListener('DOMContentLoaded', () => {
    const input = document.getElementById('myInput');
    input.addEventListener('keyup', myCarriers);
});

function myCarriers() {
    // 业务代码
}

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