独立文件中的JavaScript函数在index.html onclick元素中无法运行

问题场景 #

index.html与app.js在同一目录下，代码如下：

HTML代码（index.html） #

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="app.js"></script>
    </head>
    <body>
        <h1> Hi</h1>
        <button onclick="print_words()">Link Google Ads Account</button>
        <button onclick="console.log('index')">Index</button>
    </body>
</html>

JS代码（app.js） #

function print_words() {
    console.log("App");
}

使用命令python -m http.server 4200启动服务器后，点击第一个按钮报错：

(index):6 Uncaught ReferenceError: print_words is not defined
    at HTMLButtonElement.onclick

第二个内嵌console.log的按钮可正常工作，已尝试将script标签放在body或head中，均无效。疑问：是否与Python服务器有关？

解决建议 #

• 确认服务器运行目录：运行python -m http.server 4200时，必须确保当前终端的工作目录是index.html和app.js所在的目录。如果在父目录运行，服务器会找不到这两个文件，导致app.js加载失败（404状态）。
• 检查app.js是否加载成功：打开浏览器开发者工具（F12）切换到「网络」标签，刷新页面，查看app.js的请求状态。如果状态是404，说明路径匹配错误；如果状态是200，点击查看响应内容，确认是否是正确的函数代码。
• 清除浏览器缓存：浏览器可能缓存了旧的、无内容的app.js文件，按Ctrl+F5强制刷新页面，或在开发者工具「网络」标签勾选「禁用缓存」后重新测试。
• 排查全局作用域问题：如果app.js中不小心启用了模块模式（比如script标签加了type="module"），函数不会暴露到全局作用域。检查script标签是否有该属性，若有则移除，或修改app.js将函数挂载到全局：

  window.print_words = function() {
      console.log("App");
  }
  

关于Python服务器的说明 #

Python的http.server只是静态文件服务器，和这个问题无关。只要文件路径正确，它会正常返回文件内容；问题根源是app.js未被正确加载到页面中，或函数未暴露到全局作用域。

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