gpt4 book ai didi

javascript - 如何在 HTML 中正确调用 JS 函数?

转载 作者:行者123 更新时间:2023-12-01 01:13:11 30 4
gpt4 key购买 nike

我对 Javascript 的奇迹还比较陌生,无法在这个问题上取得突破。我已经完成了一些故障排除,并且我很确定我的 JS 文件正在加载,但我无法执行其中的任何内容 - JS 代码在 HTML 中内联工作正常。

相关代码:

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>

这是我尝试过的一些事情:

$(document).ready(function(){
<!-- same script code above -->
}
<小时/>
window.addEventListener('load', function() {
<!-- same script code above -->
}

最坏的情况是,我可以保持代码内联 - 但我宁愿正确地做事并学习正确的技术。非常感谢任何建议!

最佳答案

一些事情:

1) 你说你相信你的 javascript 文件加载正确。根据您在 html 中的脚本标记,它认为 javascript 文件位于目录中您的 html 文件旁边(您可能已经有了这个,但只需仔细检查)。

2)当您执行“x.className +=“responsive””时,您将在当前类文本后面附加名称,因此它将是:“nav-bar-linksresponsive”,这不是一个类。我认为你想要的是 x.classList.add("responsive")。

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

我将上面的代码复制到 test.html 文件和 test.js 文件中,我确实看到了 .js 函数在链接按下时被触发,但只是看到类被错误地创建,就像我在 #2 中提到的那样。

关于javascript - 如何在 HTML 中正确调用 JS 函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54989816/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com