堆栈内存溢出
  繁体   English   中英

Javascript 文件适用于一个 HTML 文件，但不适用于另一个

[英]Javascript File works for one HTML file but not the other

 原文  2021-05-25 18:03:02  1   2    javascript/ html/ css

问题描述

我有一个链接到我的 index.HTML 文件的 JS 文件，它可以正常工作，但它不适用于 other.HTML 文件。 为什么是这样。 我需要 Javascript 申请的元素是相同的，只是在其中一些上添加了 ID 标签。 据我了解，这应该不会导致任何问题，因为它们具有相同的 class 名称。

下面是第一个和第二个 HTML 文件以及 JS 文件。

我在这里想念什么？ 我认为你可以链接到同一个 JS 文件，只要 HTML 相同并且有一个脚本标签来链接到 JS 文件。 请帮忙。

工作 HTML 文件：

    <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>

不工作 HTML 文件：

    <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");
  });

这是我移动到它自己的文件的代码。 Html 文件和 JS 没有改变。

.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;
    }
  }

自从移动导航栏 CSS 以来，我注意到的一个主要区别是“转到顶部”按钮现在在您首次加载到页面时出现，而不是仅在向下滚动时出现。

在下面添加主 CSS 文件以获取更多上下文。

* {
  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?

2 个解决方案

解决方案1
 1 已采纳  2021-05-26 16:24:57

请检查这个你必须这样写，

在 HTML 文件中，您必须添加一个属性 id/class

 <form action="#" id="formData">
 </form>

在 jquery/javascript 中“使用任何人，这取决于你”

//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();
    }
  });

解决方案2
 -2  2021-05-26 03:43:20

尝试在未工作的 html 中删除 id="cNavbar-menu"

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Javascript适用于HTML，但不适用于JavaScript文件 Javascript适用于HTML文件，但不适用于Javascript文件 脚本在html中有效，但在javascript文件中无效 函数在javascript文件中有效，但在html文件中无效 Javascript文件可以在计算机文件上使用HTML，但不能在Github上使用 画布只能在HTML文件中使用，而不能在javascript文件中使用 如何使用普通 JavaScript 从一个 html 文件中获取特定 div 并将其放置在其他 html 文件中？ 导入依赖项在一个文件中有效，但在另一个文件中无效 保存HTML文件后，JavaScript不起作用 moment（）函数可在html中工作，但不能在单独的javascript文件中工作
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM