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

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

javascript html css

Javascript文件适用于一个HTML文件，但不适用于另一个HTML文件,javascript,html,css,Javascript,Html,Css,我有一个JS文件链接到我的index.HTML文件，该文件工作正常，但对其他.HTML文件不起作用。这是为什么。我需要应用Javascript的元素是相同的，只是在其中一些元素上添加了ID标记。据我所知，这应该不会引起任何问题，因为它们具有相同的类名下面是第一个和第二个HTML文件以及JS文件我错过了什么？我想你可以链接到相同的JS文件，只要HTMLs是相同的，并且有一个脚本标签链接到JS文件。请帮忙工作HTML文件： <script src="js/scripts

我有一个JS文件链接到我的index.HTML文件，该文件工作正常，但对其他.HTML文件不起作用。这是为什么。我需要应用Javascript的元素是相同的，只是在其中一些元素上添加了ID标记。据我所知，这应该不会引起任何问题，因为它们具有相同的类名

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

我错过了什么？我想你可以链接到相同的JS文件，只要HTMLs是相同的，并且有一个脚本标签链接到JS文件。请帮忙

工作HTML文件：

    <script src="js/scripts.js"></script>
    <title>Test 1</title>
    </head>
    
    <body>
    
      <!--Navbar-->
      <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>

    <script src="js/scripts.js"></script>
    
    <title>test file 2</title>
    </head>
    
    <body>
      <!--Navbar-->
      <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>

尝试在未加工的html中删除id=“cNavbar menu”

请检查此项，您必须这样写

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

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

在非工作页面中，脚本标记使用卷曲引号

“

而不是标准引号

“

。这可能就是原因。你可以使用单引号或双引号，但不能使用卷曲引号之类的特殊字符。我想也是这样，但在进行更改后，结果仍然保持不变。JS仍然没有链接。但是谢谢你指出这一点。如果你重命名你的工作文件，它是否仍然可以用新的名称工作？如果是的话，不仅仅是比较来源，你在那里遗漏了一些东西。我试过了，没有任何改变。我删除了所有原始代码，重新复制了相同的代码并运行了它。仍然没有链接.js文件。这就像它没有指向目录中的它一样。不幸的是，这不起作用。@applecart它正在根据您的需要工作？是的，先生！！！！就这样！页面100%按预期工作！你太棒了！那么，这背后的逻辑是什么？如果变量是从index.html文件调用的，为什么我需要定义一个新的变量来转换我的变量？我们只是将

表单

即时检索为变量，如果您在一个页面上有多个

表单

，这只是一个想法。那么你提交了哪一个呢？我最后不得不在我的两个HTML代码中声明，但这样做它们都能工作。这就是为什么我感到困惑的原因，因为我必须同时为这两个文件而不是它不工作的HTML文件而这样做。

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

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