如何正确链接外部JavaScript文件？外部JS文件无法生效问题排查

嘿，我帮你排查下这个外部JS不生效的问题～主要是两个小细节没做好，咱们一个个来解决：

1. 函数调用的语法小错误 #

先看你HTML里的onmouseover属性：

<h1 id="demo" onmouseover="mouseOver">Mouse over me</h1>

这里少了个关键的括号()！应该写成onmouseover="mouseOver()"。因为onmouseover需要的是能直接执行的代码语句，光写函数名只是引用函数本身，不会触发执行。你嵌入JS时可能刚好没犯这个错，所以能正常运行，补上括号就没问题啦。

2. 外部JS文件的路径问题（最可能的核心原因） #

你写的src="Documents/postlecture.js"是相对路径，但这个路径是相对于当前HTML文件所在的位置，不是你系统里的「文档」文件夹哦！很多人会在这里踩坑，把系统文件夹路径当成网页的相对路径用，肯定找不到文件。

给你几个常见的正确路径示例，你根据自己的文件结构选：

• 如果HTML和JS文件在同一个文件夹：直接写src="postlecture.js"
• 如果JS放在HTML同级的Documents文件夹里：src="Documents/postlecture.js"（要确保这个文件夹真的存在，且JS在里面）
• 如果JS在HTML的上级文件夹的Documents里：src="../Documents/postlecture.js"
• 实在搞不清的话，也可以用绝对路径（但不推荐，换电脑就失效）：比如Mac上写src="/Users/你的用户名/Documents/postlecture.js"，Windows上写src="C:/Users/你的用户名/Documents/postlecture.js"

快速验证路径对错的方法： #

打开HTML页面后按F12调出开发者工具，切换到「网络」标签，刷新页面。如果看到postlecture.js的请求状态是404，那绝对是路径错了，调整到状态变成200就说明文件找到了。

修正后的完整代码 #

HTML文件： #

<!DOCTYPE html>
<html>
<head>
    <title>Post Lecture Task</title>
</head>
<body>
    <h1 id="demo" onmouseover="mouseOver()">Mouse over me</h1>
    <!-- 记得根据你的实际文件位置调整src哦 -->
    <script src="postlecture.js"></script>
</body>
</html>

外部JS文件（postlecture.js）： #

function mouseOver() {
    document.getElementById("demo").style.color = "red";
}

这样调整后，鼠标悬停标题应该就能变红啦～

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