堆棧內存溢出
  簡體   English   中英

Javascript 文件適用於一個 HTML 文件，但不適用於另一個

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

 原文  2021-05-25 18:03:02  4   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