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

Question

I'm relatively new to the wonders of Javascript and cannot make a breakthrough on this issue. 我是Java奇迹的新手，在这个问题上无法取得突破。 I've done some troubleshooting, and I'm pretty sure my JS file is being loaded, but I can't get anything within it to execute - JS code works fine inline within HTML. 我已经进行了一些故障排除，并且可以确定我的JS文件已加载，但是我无法在其中执行任何操作-JS代码在HTML中可以很好地内联。

Relevant code: 相关代码：

 function mobileNavBar() { var x = document.getElementById("nav-bar-ul"); if (x.className === "nav-bar-links") { x.className += "responsive"; } else { x.className = "nav-bar-links"; } }

 <!DOCTYPE html> <head> <title>Testing</title> <script src="myScripts.js"></script> <link rel="stylesheet" href="https://use.typekit.net/lye7pws.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="style-template.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="UTF-8"> </head> <body> <nav id="nav-bar"> <a href="#" class="logo-link"> <div class="logo" id="firstName"> <h1>name</h1> </div> <ul id="logo-list"> <li> <div class="door"></div> <div class="knob"></div> </li> <li> <div class="logo" id="lastName"> <h1>name</h1> </div> </li> </ul> </a> <ul class="nav-bar-links" id="nav-bar-ul"> <li><a class="underline" href="#">Play</a></li> <li><a class="underline active-underline" href="#">About</a></li> <li><a class="underline" href="#">Contact</a></li> </ul> <a href="javascript:void(0);" class="nav-bar-icon" onclick="mobileNavBar()"> <img src="images/menu-icon.svg" width="50px" height="50px"> </a> </nav> </body> </html>

Here's some things that I've tried: 这是我尝试过的一些事情：

$(document).ready(function(){
    <!-- same script code above -->
}

window.addEventListener('load', function() {
    <!-- same script code above -->
}

Worst comes to worst, I can keep the code inline - but I'd rather do things properly and learn proper techniques. 最糟糕的是，我可以保持代码内联-但我宁愿做正确的事情并学习适当的技术。 Any advice is greatly appreciated! 任何意见是极大的赞赏！

Answer 1

A few things: 一些东西：

1) You say you believe your javascript file loads correctly. 1）您说您相信自己的javascript文件已正确加载。 According to your script tag in html it believes that the javascript file is sitting right next to your html file in the directory (you might have this already, but just a double check). 根据您在html中的脚本标签，它认为javascript文件位于目录中html文件的旁边（您可能已经拥有了，但要仔细检查）。

2) When you are doing "x.className += "responsive"" you are appending the name right after the current class text, so it would be: "nav-bar-linksresponsive" which is not a class. 2）当您执行“ x.className + =” responding“”时，您将在当前类文本后面追加名称，因此它将是：“ nav-bar-linkssensitive”，它不是一个类。 I think what you are going for is x.classList.add("responsive"). 我认为您要使用的是x.classList.add（“ response”）。

3) You are also missing the opening "HTML" tag at the top of the document. 3）您还缺少文档顶部的打开“ HTML”标签。 Not sure if this is how it actually is or if you just pasted it this way in the example. 不知道这是实际上的样子还是在示例中以这种方式粘贴了它。

I copied the above code into a test.html file and test.js file, and I did see the .js function being triggered on the link press, but just saw the class being created incorrectly like I mentioned in #2. 我将上面的代码复制到test.html文件和test.js文件中，确实看到链接按下时触发了.js函数，但是就像我在＃2中提到的那样，我看到的类创建错误。

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-03-04 19:16:09

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-03-04 19:16:09

解决方案1
2 已采纳 2019-03-04 19:16:09