Javascript 如何在HTML中正确调用JS函数？

我对Javascript的奇迹还比较陌生，在这个问题上无法取得突破。我已经做了一些故障排除，我非常确定我的JS文件正在加载，但我无法在其中执行任何东西-JS代码在HTML中内联运行良好

相关代码：

函数mobileNavBar（）{
var x=document.getElementById（“导航条ul”）；
如果（x.className==“导航条链接”）{
x、 类名+=“响应”；
}否则{
x、 className=“导航条链接”；
}
}

测试

有几件事：

1） 您说您相信您的javascript文件加载正确。根据html中的脚本标记，它认为javascript文件就在目录中html文件的旁边（您可能已经有了它，但只是再次检查）

2） 当您执行“x.className+=“responsive”时，您将在当前类文本之后添加名称，因此它将是“导航栏链接responsive”，而不是类。我想你想要的是x.classList.add（“响应”）

3） 您还缺少文档顶部的开始“HTML”标记。不确定这是否是实际情况，或者您是否只是以这种方式将其粘贴到示例中

我将上述代码复制到一个test.html文件和test.js文件中，我确实看到在link press上触发了.js函数，但只是看到类被错误地创建，就像我在#2中提到的那样。

有几件事：

1） 您说您相信您的javascript文件加载正确。根据html中的脚本标记，它认为javascript文件就在目录中html文件的旁边（您可能已经有了它，但只是再次检查）

2） 当您执行“x.className+=“responsive”时，您将在当前类文本之后添加名称，因此它将是“导航栏链接responsive”，而不是类。我想你想要的是x.classList.add（“响应”）

3） 您还缺少文档顶部的开始“HTML”标记。不确定这是否是实际情况，或者您是否只是以这种方式将其粘贴到示例中

---

我将上述代码复制到一个test.html文件和test.js文件中，我确实看到在link press上触发了.js函数，但只是看到类的创建不正确，就像我在#2中提到的那样。

看起来您试图在构建页面之前加载该js文件。尝试在

标记之前添加脚本标记。一个简短的回答：你根本不应该从HTML调用JS。使用
addEventListener
附加事件（如果使用jQuery，则使用jQuery的事件模型）。代码中的问题是，内联侦听器需要一个全局函数来引用，它们无法在
document.ready（）
或
窗口的回调中看到。addEventListener
。我尝试过像您提到的@justDan那样移动脚本标记，但这并不能使它工作：（@Teemu，你介意详细说明如何使用addEventListener来构造代码吗？如果你真的必须使用内联侦听器，那么只需将链接脚本标记放在正文的末尾。看起来你正在尝试在构建页面之前加载该js文件。尝试将该脚本标记添加到
标记之前。简短回答：你根本不应该从HTML调用JS。使用
addEventListener
来附加事件（或者jQuery的事件模型，如果你正在使用jQuery）。代码中的问题是，内联侦听器需要一个全局函数来引用，它们无法看到
document.ready（）的回调内部
或
窗口。addEventListener
。我尝试过像您提到的@justDan那样移动脚本标记，但这并不能使它工作：（@Teemu，你介意用addEventListener的方式详细说明如何构造代码吗？如果你真的需要使用内联侦听器，那么只需将链接脚本标记放在正文的末尾。谢谢@Ben Krueger！1）这是正确的，但总是值得一提2）这是我的问题-我的代码很有效，实际上是直接从w3schools获得的，我只是忘记了在responsive x.classname+=“responsive”之前有一个空格；但是你的classList.add方法可能是一种更好的方法，所以我会尝试让它发挥作用。谢谢@Ben Krueger！1）这是正确的，但总是值得一提2）这是我的问题-我的代码是有效的，它实际上是直接从w3schools来的，我只是忘记了在响应x.classname+=“响应”之前有一个空格；不过，您的classList.add方法可能是一种更好的方法，因此我将尝试让它发挥作用。