Javascript 文件适用于一个 HTML 文件，但不适用于另一个 - IT屋-程序员软件开发技术分享社区
首页 前端开发 Javascript 文件适用于一个 HTML 文件，但不适用于另一个
Javascript 文件适用于一个 HTML 文件，但不适用于另一个
[英] Javascript File works for one HTML file but not the other
本文介绍了Javascript 文件适用于一个 HTML 文件，但不适用于另一个的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个链接到我的 index.HTML 文件的 JS 文件，该文件工作正常，但不适用于其他 .HTML 文件.为什么是这样.我需要 Javascript 来应用它们的元素是相同的，并且只在其中一些元素上添加了 ID 标签.据我了解，这应该不会造成任何问题，因为它们具有相同的类名.
下面是第一个和第二个 HTML 文件以及 JS 文件.
我在这里错过了什么?我认为你可以链接到同一个 JS 文件，只要 HTML 相同并且有一个脚本标签来链接到 JS 文件.请帮忙.
工作 HTML 文件:
<title>测试 1</title><身体><!--导航栏--><form action="#";id="formData"></表单><nav class="navbar"><div类=内部宽度"><a href="/";class=logo"></a><button class="menu-toggle"><span></span><span></span><span></span><div class="navbar-menu"><a href=#home">首页</a><a href=#about">关于我们</a><a href=#products">产品</a><a href="#services">服务</a><a href="#training">培训&支持<a href="#contact">联系我们</a><a href="careers.html">职业 </a><div class="dropdown"><a href="#";class=dropbtn">登录</a><div class="dropdown-content"><h4>帐号</h4><form action="#"><输入类型=文本"类=acctNum"；占位符=帐号"/><h4>密码</h4><输入类型=文本"类=密码"占位符=密码"/><输入类型=提交"值=登录"类=登录"/><输入类型=提交"value=创建一个帐户"类=注册"/></表单>
</nav><!--返回顶部--><button class="goTop fas fa-arrow-up"></button><脚本>AOS.init();
不工作的 HTML 文件:
<title>测试文件2</title><身体><!--导航栏--><form action="#";id="formData"></表单><nav class="navbar"><div类=内部宽度"><a href="/";class=logo"></a><button class="menu-toggle"><span></span><span></span><span></span><div class="navbar-menu";id="cNavbar-menu"><a href="/index.html">首页</a><div class="dropdown"><a href="#";class=dropbtn">登录</a><div class="dropdown-content"><h4>账户名</h4><form action="#"><输入类型=文本"类=acctNum"；占位符=帐号"/><h4>密码</h4><输入类型=文本"类=密码"占位符=密码"/><输入类型=提交"值=登录"类=登录"/><输入类型=提交"value=创建一个帐户"类=注册"/></表单>
</nav><!--返回顶部--><button class="goTop fas fa-arrow-up"></button><脚本>AOS.init();
JavaScript:
var form = document.getElementById('formData');form.addEventListener(提交", handleSubmit)$(窗口).滚动(功能(){如果 (this.scrollY > 20) {$(".navbar").addClass("sticky");$(.goTop").fadeIn();} 别的 {$(".navbar").removeClass("sticky");$(".goTop").fadeOut();}});$(".goTop").click(function () {滚动(0, 0)；});$(".menu-toggle").click(function () {$(this).toggleClass(active");$(".navbar-menu").toggleClass("active");});这是我移到它自己的文件中的代码.Html文件和JS都没有变化.
.navbar {位置:固定；背景色:透明；宽度:100%；填充:30px 0;顶部:0；z-索引:999；过渡:0.3s线性；}.内宽度{最大宽度:1300px；保证金:自动；填充:0 20px；}.navbar .inner-width {显示:弹性；对齐项目:居中；对齐内容:间隔；}.标识 {宽度:500px；高度:44px；背景图片:url(../images/Full\Logo\white.png);背景重复:不重复；背景大小:包含；z-索引:9999；}.menu-toggle {背景:无；宽度:30px；边界:无；光标:指针；位置:相对；大纲:无；z-索引:999；显示:无；}.menu-toggle 跨度{显示:块；高度:3px；背景色:#fff;边距:6px 0；位置:相对；过渡:0.3s线性；}.navbar-menu a {颜色:#f1f1f1；字体大小:15px；字体粗细:500；左边距:20px；过渡:0.2s线性；}.navbar-menu a:hover {颜色:#d03228 ！重要；}.sticky {背景色:#fff;填充:18px 0;}.sticky .logo {背景图片:url(../images/Full\Logo\black.png);}.sticky .navbar-menu a {颜色:#111；}.sticky .menu-toggle span {背景颜色:#111；}/* 下拉按钮 */.dropbtn {背景色:透明；白颜色;光标:指针；字体大小:15px；边界:无；顶部:0；}.落下 {位置:绝对；显示:内联块；宽度:10%；}.下拉内容{边距顶部:10px；左边距:-100px；填充:10px；显示:无；位置:相对；背景颜色:#353b48；最小宽度:160px；box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);z-索引:1；}.dropdown-content h4 {白颜色;填充:5px 0 5px 0；}.dropdown-content .login {边距顶部:15px；背景色:透明；颜色:#f1f1f1；字体大小:16px；边框:2px 实心 #d03228;边框半径:10px；填充:5px；左边距:自动；光标:指针；过渡:0.3s线性；}.dropdown-content .login:hover {背景颜色:#d03228；颜色:#fff;}.dropdown-content .register {边距顶部:10px；背景色:透明；颜色:#f1f1f1；字体大小:16px；边框:2px 实心 #d03228;边框半径:10px；填充:5px；左边距:自动；光标:指针；过渡:0.3s线性；}.dropdown-content .register:hover {背景颜色:#d03228；颜色:#fff;}/* 在悬停时显示下拉菜单 */.dropdown:悬停 .dropdown-content {显示:块；}.goTop {位置:固定；z-索引:999；底部:40px；右:40px；宽度:40px；高度:40px；背景颜色:#d03228；边界:无；边框半径:6px；光标:指针；颜色:#fff;大纲:无；显示:无；}@media 屏幕和(最大宽度:980px){.menu-toggle {显示:块；}.导航栏菜单{位置:固定；高度:100vh；宽度:100%；背景颜色:#353b48；顶部:0；右:-100%；最大宽度:400px；填充:80px 50px；过渡:0.3s线性；}.navbar-menu a {显示:块；字体大小:30px；边距:30px 0;}.sticky .navbar-menu {背景色:#f1f1f1；}.navbar-menu.active {右:0；}.menu-toggle.active span:nth-child(1) {变换:旋转(-45度)；顶部:4px；}.menu-toggle.active span:nth-child(2) {不透明度:0；}.menu-toggle.active span:nth-child(3) {变换:旋转(45度)；底部:14px；}.落下 {宽度:70%；}.下拉内容{边距:10px；}}@media 屏幕和(最大宽度:600px){.内宽度{填充:0 20px；}}自从移动导航栏 CSS 以来，我注意到的一个主要区别是转到顶部"按钮现在在您第一次加载到页面时出现，而不是仅在向下滚动时出现.
在下方添加主 CSS 文件以获得更多上下文.
* {边距:0；填充:0；文字装饰:无；字体系列:蒙特塞拉特"，无衬线字体；box-sizing: 边框框；}html {滚动行为:平滑；溢出-x:隐藏；}::选择{背景颜色:#d03228；}::-webkit-scrollbar {宽度:12px；背景色:#f1f1f1；}::-webkit-scrollbar-thumb {背景颜色:#d03228；}/*主页*/#家{高度:100vh；边距:0；}#videoBG {位置:绝对；z-索引:1；边距:0；顶部:0;左:0;}@media(最小纵横比:16/9){#videoBG {宽度:100%；高度:自动；}}@media(最大纵横比:16/9){#videoBG {宽度:自动；高度:100%；}}@media(最大宽度:767px){#videoBG {显示:无；}#家 {背景图片:url(../images/fuji.JPG);背景尺寸:封面；}}有人可以解释为什么会这样吗?
解决方案
请检查这个你必须这样写，
在 HTML 文件中，你必须添加一个属性 id/class
在 jquery/javascript 中使用任何人取决于你 "
//javascriptvar form = document.getElementById('formData');//jqueryvar form = $(#formData");/*像这样添加你的脚本代码*/form.addEventListener(提交", handleSubmit)$(窗口).滚动(功能(){如果 (this.scrollY > 20) {$(".navbar").addClass("sticky");$(.goTop").fadeIn();} 别的 {$(".navbar").removeClass("sticky");$(".goTop").fadeOut();}});
I have a JS file linked to my index.HTML file that works fine but it will not work for other .HTML file. Why is this. They elements I needs Javascript to apply to are the same and only have added ID tags on some of them. As I understand it, that should cause no issues as they have the same class name.
below are the first and second HTML files along with the JS file.
What am I missing here? I thought you could link to the same JS file as long as the HTMLs are the same and have a script tag to link to the JS file. Please help.
Working HTML File:
<script src="js/scripts.js"></script>
<title>Test 1</title>
</head>
<body>
<!--Navbar-->
<form action="#" id="formData">
</form>
<nav class="navbar">
<div class="inner-width">
<a href="/" class="logo"></a>
<button class="menu-toggle">
<span></span>
<span></span>
<span></span>
</button>
<div class="navbar-menu">
<a href="#home">Home</a>
<a href="#about">About Us</a>
<a href="#products">Products</a>
<a href="#services">Services</a>
<a href="#training">Training & Support</a>
<a href="#contact">Contact Us</a>
<a href="careers.html">Careers </a>
<div class="dropdown">
<a href="#" class="dropbtn">Log-in</a>
<div class="dropdown-content">
<h4>Account Number</h4>
<form action="#">
<input type="text" class="acctNum" placeholder="Account Number" />
<h4>Password</h4>
<input type="text" class="passWord" placeholder="Password" />
<input type="submit" value="Log in" class="login" />
<input type="submit" value="Create an Account" class="register" />
</form>
</div>
</div>
</div>
</div>
</div>
</nav>
<!--Back to top-->
<button class="goTop fas fa-arrow-up"></button>
<script>
AOS.init();
</script>
</body>
Not working HTML File:
<script src="js/scripts.js"></script>
<title>test file 2</title>
</head>
<body>
<!--Navbar-->
<form action="#" id="formData">
</form>
<nav class="navbar">
<div class="inner-width">
<a href="/" class="logo"></a>
<button class="menu-toggle">
<span></span>
<span></span>
<span></span>
</button>
<div class="navbar-menu" id="cNavbar-menu">
<a href="/index.html">Home</a>
<div class="dropdown">
<a href="#" class="dropbtn">Log-in</a>
<div class="dropdown-content">
<h4>Account Name</h4>
<form action="#">
<input type="text" class="acctNum" placeholder="Account Number" />
<h4>Password</h4>
<input type="text" class="passWord" placeholder="Password" />
<input type="submit" value="Log in" class="login" />
<input type="submit" value="Create an Account" class="register" />
</form>
</div>
</div>
</div>
</div>
</div>
</nav>
<!--Back to top-->
<button class="goTop fas fa-arrow-up"></button>
<script>
AOS.init();
</script>
</body>
JavaScript:
var form = document.getElementById('formData');
form.addEventListener("submit", handleSubmit)
$(window).scroll(function () {
if (this.scrollY > 20) {
$(".navbar").addClass("sticky");
$(".goTop").fadeIn();
} else {
$(".navbar").removeClass("sticky");
$(".goTop").fadeOut();
}
});
$(".goTop").click(function () {
scroll(0, 0);
});
$(".menu-toggle").click(function () {
$(this).toggleClass("active");
$(".navbar-menu").toggleClass("active");
});
This is the code i've moved to it's own file. the Html file and JS have been unchanged.
.navbar {
position: fixed;
background-color: transparent;
width: 100%;
padding: 30px 0;
top: 0;
z-index: 999;
transition: 0.3s linear;
}
.inner-width {
max-width: 1300px;
margin: auto;
padding: 0 20px;
}
.navbar .inner-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
width: 500px;
height: 44px;
background-image: url(../images/Full\ Logo\ white.png);
background-repeat: no-repeat;
background-size: contain;
z-index:9999;
}
.menu-toggle {
background: none;
width: 30px;
border: none;
cursor: pointer;
position: relative;
outline: none;
z-index: 999;
display: none;
}
.menu-toggle span {
display: block;
height: 3px;
background-color: #fff;
margin: 6px 0;
position: relative;
transition: 0.3s linear;
}
.navbar-menu a {
color:#f1f1f1;
font-size: 15px;
font-weight: 500;
margin-left: 20px;
transition: 0.2s linear;
}
.navbar-menu a:hover {
color: #d03228 !important;
}
.sticky {
background-color: #fff;
padding: 18px 0;
}
.sticky .logo {
background-image: url(../images/Full\ Logo\ black.png);
}
.sticky .navbar-menu a {
color: #111;
}
.sticky .menu-toggle span {
background-color: #111;
}
/* Dropdown Button */
.dropbtn {
background-color: transparent;
color: white;
cursor: pointer;
font-size: 15px;
border: none;
top: 0;
}
.dropdown {
position: absolute;
display: inline-block;
width: 10%;
}
.dropdown-content {
margin-top: 10px;
margin-left: -100px;
padding: 10px;
display: none;
position: relative;
background-color: #353b48;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content h4 {
color: white;
padding: 5px 0 5px 0;
}
.dropdown-content .login {
margin-top: 15px;
background-color: transparent;
color: #f1f1f1;
font-size: 16px;
border: 2px solid #d03228;
border-radius: 10px;
padding: 5px;
margin-left: auto;
cursor: pointer;
transition: 0.3s linear;
}
.dropdown-content .login:hover {
background-color: #d03228;
color: #fff;
}
.dropdown-content .register {
margin-top: 10px;
background-color: transparent;
color: #f1f1f1;
font-size: 16px;
border: 2px solid #d03228;
border-radius: 10px;
padding: 5px;
margin-left: auto;
cursor: pointer;
transition: 0.3s linear;
}
.dropdown-content .register:hover {
background-color: #d03228;
color: #fff;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
.goTop {
position: fixed;
z-index: 999;
bottom: 40px;
right: 40px;
width: 40px;
height: 40px;
background-color: #d03228;
border: none;
border-radius: 6px;
cursor: pointer;
color: #fff;
outline: none;
display: none;
}
@media screen and (max-width: 980px) {
.menu-toggle {
display: block;
}
.navbar-menu {
position: fixed;
height: 100vh;
width: 100%;
background-color: #353b48;
top: 0;
right: -100%;
max-width: 400px;
padding: 80px 50px;
transition: 0.3s linear;
}
.navbar-menu a {
display: block;
font-size: 30px;
margin: 30px 0;
}
.sticky .navbar-menu {
background-color: #f1f1f1;
}
.navbar-menu.active {
right: 0;
}
.menu-toggle.active span:nth-child(1) {
transform: rotate(-45deg);
top: 4px;
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
transform: rotate(45deg);
bottom: 14px;
}
.dropdown {
width: 70%;
}
.dropdown-content
{
margin: 10px;
}
}
@media screen and (max-width: 600px) {
.inner-width {
padding: 0 20px;
}
}
One major difference ive noticed since moving the navbar CSS is that the "Go to Top" Button now appears when you first load into a page rather than only appearing when scrolling down.
Adding Main CSS file below for more context.
* {
margin: 0;
padding: 0;
text-decoration: none;
font-family: "Montserrat", sans-serif;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
::selection {
background-color: #d03228;
}
::-webkit-scrollbar {
width: 12px;
background-color: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background-color: #d03228;
}
/*home page*/
#home{
height: 100vh;
margin: 0;
}
#videoBG {
position:absolute;
z-index: 1;
margin: 0;
top:0;
left:0;
}
@media (min-aspect-ratio: 16/9) {
#videoBG {
width:100%;
height: auto;
}
}
@media (max-aspect-ratio: 16/9) {
#videoBG {
width:auto;
height: 100%;
}
}
@media (max-width: 767px) {
#videoBG {
display: none;
}
#home {
background-image: url(../images/fuji.JPG);
background-size: cover;
}
}
Could someone explain why this is happening?
解决方案
Please check this you have to write like this,
In the HTML file, you have to add one attribute id/class
<form action="#" id="formData">
</form>
In jquery/javascript "use anyone it's up to you "
//javascript
var form = document.getElementById('formData');
//jquery
var form = $("#formData");
/*add your script code like this*/
form.addEventListener("submit", handleSubmit)
$(window).scroll(function () {
if (this.scrollY > 20) {
$(".navbar").addClass("sticky");
$(".goTop").fadeIn();
} else {
$(".navbar").removeClass("sticky");
$(".goTop").fadeOut();
}
});
这篇关于Javascript 文件适用于一个 HTML 文件，但不适用于另一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
