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

【问题标题】：Javascript File works for one HTML file but not the otherJavascript 文件适用于一个 HTML 文件，但不适用于另一个
【发布时间】：2021-05-25 18:03:02
【问题描述】：

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

下面是第一个和第二个 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?

【问题讨论】：

在您的非工作页面中，您的脚本标签使用大引号 ” 而不是标准引号 "。大概就是这个原因。您可以使用单引号或双引号，但不能使用大引号等特殊字符
我认为在查看后也是如此，但在进行更改后结果仍然保持不变。 .JS 仍然没有链接。但感谢您指出这一点。
如果您重命名您的工作文件，它仍然可以使用新名称吗？如果是这样，那么不仅仅是比较来源，您还缺少一些东西。
我试过了，没有任何变化。我删除了所有原始代码并重新复制了相同的代码并运行了它。仍然没有链接 .js 文件。就好像它没有在目录中指向它一样。

标签： javascript html css

【解决方案1】：

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

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

【讨论】：

@applecart 它可以根据您的需要工作吗？
是的，先生！！！！就是这样！页面按预期工作 100%！你摇滚！那么这背后的逻辑是什么？如果变量是从 index.html 文件中调用的，为什么我需要定义一个新变量来转换我的
？
如果您在一页上有多个forms，我们只是将form 即时检索到变量中。那么你提交了哪一个。
我最终不得不在我的两个 HTML 代码中声明

但这样做它们都可以工作。这就是我感到困惑的原因，因为我必须对两者都这样做，而不仅仅是对它不起作用的 HTML 文件。
所以看起来 JS 代码在我将 NAV 栏 css 移动到它自己的文件后停止工作。 CSS 文件是否与任何 JS 相关，还是我遗漏了什么？

【解决方案2】：

尝试在未处理的 html 中删除 id="cNavbar-menu"

【讨论】：