title: JS working on index but not my other page I'm editing
body: <p>So, I'm working on an assignment for school.
  So, at first my issue was that my JavaScript wasn't working properly on pages, it got fixed now thanks to this kind soul I met through a web developer discord.</p>
  <p>My issue now is:
  At first the function was working properly across all of my pages, but once I started typing out the code for my menu page and putting in the CSS for it, it completely stopped working just for the menu.html page, but it works for my index.html and all the other pages. I'm afraid that when I started adding on to the other pages that it'll break the javascript function like it did for the menu page. It should work as it does for the others, but I'm unsure why it isn't.</p>
  <p>This is the code for my index.html/homepage:
  <a href="https://jsfiddle.net/senikaura/n8jtz5sq/3/" rel="nofollow noreferrer">https://jsfiddle.net/senikaura/n8jtz5sq/3/</a></p>
  <p>This is the code for my menu.html/menu page:<a href="https://jsfiddle.net/senikaura/Lngd0e24/2/" rel="nofollow noreferrer">https://jsfiddle.net/senikaura/Lngd0e24/2/</a></p>
  <p>Both are linked to the same javascript and css files.</p>
  <p>INDEX.HTML</p>
  <pre><code>&lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt; &lt;!--Header containing title,meta,and links--&gt;
          &lt;title&gt;ctowncuisine&lt;/title&gt;
          &lt;meta charset=&quot;UTF-8&quot;&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;
          &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;https://use.typekit.net/qsw5hiv.css&quot;&gt; 
          &lt;link rel=&quot;stylesheet&quot; href=&quot;CSS/style.css&quot;&gt; &lt;!--link reference to CSS stylesheet--&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;nav&gt;
          &lt;div class=&quot;townlogo&quot;&gt;
              &lt;a class=&quot;viewmenu&quot; href=&quot;index.html&quot;&gt; &lt;!--Technically the header of the page, but used in the body for consistency--&gt;
              &lt;img src=&quot;Images/townlogo.jpg&quot; alt=&quot;chinese restaurant logo&quot;&gt;
          &lt;/div&gt;
      &lt;/a&gt;
              &lt;ul class=&quot;navigation&quot;&gt; &lt;!--section for top navigation bar--&gt;
                  &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;menu.html&quot;&gt;Menu&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;contact.html&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;reserve_table.html&quot;&gt;&lt;span&gt;Reserve Table&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;div class=&quot;burger&quot; id=&quot;burger&quot;&gt;
                  &lt;div class=&quot;line1&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;line2&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;line3&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;line4&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      
  
       &lt;div class=&quot;indexbody&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;img1&quot;&gt;&lt;/div&gt; &lt;!--lantern.html image class--&gt;
          &lt;a class=&quot;viewmenu&quot; href=&quot;menu.html&quot;&gt; &lt;!--Linking border text with href--&gt;
              &lt;div  class=&quot;menutext&quot;&gt;
              &lt;span class=&quot;border &quot;&gt;
              View Our Menu
              &lt;/span&gt;
              &lt;/div&gt; 
      &lt;/a&gt;
          
  
  &lt;section class=&quot;section section-mission&quot;&gt;
      &lt;h2 class=&quot;mission&quot;&gt;Our Mission&lt;/h2&gt; &lt;!--This is the second heading containing: Our Mission section--&gt;
      &lt;p&gt;To bring quality, style and the wish for good fortune to all of our guests. We provide a high-end experience through Chinese cuisine.
      &lt;/p&gt; &lt;!--Paragraph containing the mission statement of TOWN--&gt;
  &lt;/section&gt;
  
  &lt;div class=&quot;img2&quot;&gt; &lt;!--div classifying second image: cookingcropped.html--&gt;
      &lt;span class=&quot;border&quot;&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  
  &lt;section class=&quot;section section-vision&quot;&gt;
      &lt;h2 class=&quot;vision&quot;&gt;Vision&lt;/h2&gt; &lt;!--header 2 containing a class for CSS: Vision--&gt;
      &lt;p&gt; &lt;span style=&quot;color: rgb( 213 162 141);&quot;&gt;TOWN&lt;/span&gt; combines a variety of chinese cuisine to excite and delight our customers.
          Our vision for the future is to create experiential dining that is more than just a night out.&lt;br&gt; We aim to bring quality and luxury across all aspects of our brand.
          The approach of &lt;span style=&quot;color: rgb( 213 162 141);&quot;&gt;TOWN&lt;/span&gt; is to develop our brand with the understanding of both our culture and consumer insights.&lt;br&gt; Within our vision always lives the promise of inspiring creativity, conversation and quality.
          Our audience is a high-end clientele who values a dining experience.&lt;br&gt;The age range of our customers are from early 30s-60s. We would like them to come back for both personal dining and events.
      &lt;/p&gt;
  &lt;/section&gt;
  
  &lt;footer&gt;
  &lt;div class=&quot;rectangle&quot;&gt; &lt;!--This section is the footer--&gt;
      &amp;copy; 2022 ctowncuisine.com designed by &lt;span&gt;MM&lt;/span&gt;
  &lt;/div&gt;
  &lt;/footer&gt;
  
  &lt;script async defer src=&quot;./js/app.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  <p>Menu.Html</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt; &lt;!--Header containing title,meta,and links--&gt;
          &lt;title&gt;ctowncuisine&lt;/title&gt;
          &lt;meta charset=&quot;UTF-8&quot;&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;
          &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;https://use.typekit.net/qsw5hiv.css&quot;&gt; 
          &lt;link rel=&quot;stylesheet&quot; href=&quot;CSS/style.css&quot;&gt;
           &lt;!--link reference to CSS stylesheet--&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;nav&gt;
          &lt;div class=&quot;townlogo&quot;&gt;
              &lt;a class=&quot;viewmenu&quot; href=&quot;index.html&quot;&gt; &lt;!--Technically the header of the page, but used in the body for consistency--&gt;
              &lt;img src=&quot;Images/townlogo.jpg&quot; alt=&quot;chinese restaurant logo&quot;&gt;
          &lt;/div&gt;
      &lt;/a&gt;
  
      &lt;div class=&quot;topbar&quot;&gt;&lt;/div&gt;
              &lt;ul class=&quot;navigation&quot;&gt; &lt;!--section for top navigation bar--&gt;
                  &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;menu.html&quot;&gt;Menu&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;contact.html&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=&quot;reserve_table.html&quot;&gt;&lt;span&gt;Reserve Table&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;div class=&quot;burger&quot; id=&quot;burger&quot;&gt;
                  &lt;div class=&quot;line1&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;line2&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;line3&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;line4&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
  
          &lt;div class=&quot;container-wrapper&quot;&gt;
              &lt;div class=&quot;container&quot;&gt;
                  &lt;img src=&quot;Images/charsiu.jpg&quot; alt=&quot;egg rolls&quot; class=&quot;image&quot;&gt;
                  &lt;img src=&quot;Images/mangostickyrice.jpg&quot; alt=&quot;hot pot&quot; class=&quot;image&quot;&gt;
                  &lt;img src=&quot;Images/alcoholglasses.jpg&quot; alt=&quot;Chinese Barbecue Pork&quot; class=&quot;image&quot;&gt;
                  &lt;img  src=&quot;Images/eggrolls.jpg&quot; alt=&quot;mango sticky rice dessert&quot; class=&quot;image&quot;&gt;
                  &lt;img src=&quot;Images/hotpot.jpg&quot; alt=&quot;alcohol beverages&quot; class=&quot;image&quot;&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;a class=&quot;appmenu&quot; href=&quot;#&quot;&gt; &lt;!--Linking border text with href--&gt;
              &lt;div  class=&quot;apptext&quot;&gt;
              &lt;span class=&quot;appborder &quot;&gt;
              Appetizers
              &lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt; 
      &lt;/a&gt;
  
      &lt;a class=&quot;soupmenu&quot; href=&quot;#&quot;&gt; &lt;!--Linking border text with href--&gt;
          &lt;div  class=&quot;souptext&quot;&gt;
          &lt;span class=&quot;soupborder &quot;&gt;
          Soup &amp; Hot Pot
          &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt; 
  &lt;/a&gt;
  
  &lt;a class=&quot;mainmenu&quot; href=&quot;#&quot;&gt; &lt;!--Linking border text with href--&gt;
      &lt;div  class=&quot;maintext&quot;&gt;
      &lt;span class=&quot;mainborder &quot;&gt;
      Main Courses
      &lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt; 
  &lt;/a&gt;
  
  &lt;a class=&quot;dessmenu&quot; href=&quot;#&quot;&gt; &lt;!--Linking border text with href--&gt;
      &lt;div  class=&quot;desstext&quot;&gt;
      &lt;span class=&quot;dessborder &quot;&gt;
      Desserts
      &lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt; 
  &lt;/a&gt;
  
  &lt;a class=&quot;drinkmenu&quot; href=&quot;#&quot;&gt; &lt;!--Linking border text with href--&gt;
      &lt;div  class=&quot;drinktext&quot;&gt;
      &lt;span class=&quot;drinkborder &quot;&gt;
      Beverages
      &lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt; 
  &lt;/a&gt;
      
      
      &lt;footer&gt;
          &lt;div class=&quot;rectangle&quot;&gt; &lt;!--This section is the footer--&gt;
              &amp;copy; 2022 ctowncuisine.com designed by &lt;span&gt;MM&lt;/span&gt;
          &lt;/div&gt;
          &lt;/footer&gt;
  
      &lt;script async defer src=&quot;./js/app.js&quot;&gt;&lt;/script&gt;   
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>CSS linked to both:</p>
  <pre><code>
  /* Index.html styling*/
  *{
      margin: 0px;
      padding: 0px;
      box-sizing: border-box;
  }
  
  .townlogo{
      display: flex;
      justify-content: center;
      margin-top: 20px;
      mix-blend-mode: multiply;
  }
  
  nav{
      display: flex;
      justify-content: space-around;
      align-items: center;
      min-height: 8vh;
      background-color: white;
      margin-bottom: 20px;
  }
  
  ul.navigation{
      display: flex;
      justify-content: space-around;
      width: 40%;
      align-items: center;
      margin-top: 20px;
      background-color: (white);
      font-family: athelas, serif;
      font-weight: 400;
      font-style: normal;
      letter-spacing: 1px;
  }
  ul.navigation li{
      list-style: none;
  }
  ul.navigation a{
      color: black;
      text-decoration: none;
  }
  
  .burger{
      display: none;
      cursor: pointer;
  }
  
  .burger div{
      width: 25px;
      height: 3px;
      background-color: black;
      margin: 5px;
  }
  
  li a:hover{
      color: rgb(190 30 45);
  }
  
  .indexbody{
      height: 100%;
      margin: 0;
      font-size: 17px;
      font-family: athelas, serif;
      font-weight: 400;
      font-style: normal;
      line-height: 1.8em;
      color: rgb(65 57 61);
  }
  
  .img1, .img2{
      position: relative;
      opacity:0.70;
      background-position: center;
      background-size:cover;
      background-repeat: no-repeat;
      background-attachment: fixed; /*Can be adjusted for mobile viewing*/
  }
  
  
  .img1{
      background-image: url('../Images/lantern.jpg');
      min-height: 600px;
  }
  
  .img2{
      background-image: url('../Images/cookingcropped.jpg');
      min-height: 400px;
  }
  
  .section{
      text-align: center;
      padding:50px 80px;
  }
  
  .section-mission{
      background-color: rgb(65 57 61);
      color:white;
  }
  
  .section-vision{
      background-color: rgb(65 57 61);
      color:white;
  }
  
  .menutext{
      position: absolute;
      font-size: 40px;
      top: 50%;
      width: 100%;
      text-align: center;
      color: white;
      letter-spacing: 3px;
      text-shadow: 3px 3px 3px black ;
  }
  
  .menutext .border{
      border-style: solid;
      border-width: 4px;
      padding: 8px;
      color: white;
      box-shadow: 3px 3px 3px black;
      text-decoration: none;
      
  }
  
  a.viewmenu:link{
      text-decoration: none;
      }
  
      a.viewmenu:visited{
          text-decoration: none;
          }
  
  a.viewmenu:hover{
  background-color: transparent;
  }
  
  a.viewmenu:active{
      text-decoration: none;
      }
  
  /*rectangle div contains copyright footer section*/
  .rectangle{
      text-align: center;
      font-family: athelas, serif;
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      border-left: 520px solid rgb(190 30 45) ;
      border-right: 520px solid rgb(190 30 45) ;
      margin-top: 20px;
      margin-bottom: 20px;
  }
  
  .navigation span{
      display: inline-block;
      border: 2px solid rgb(190 30 45);
      border-style: outset;
      padding: 5px 12px;
      border-radius: 5px;
  }
  
  /* index.html media for javascript and viewing */
  
  @media screen and (max-width: 1024px){
      .navigation{
          width: 50%;
      }
  }
  
  @media screen and (max-width: 768px){
      body{
          overflow-x: hidden;
      }
      .navigation{
          position: absolute;
          right: 0px;
          height: 82.5vh;
          top: 17vh;
          background-color: white;
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 50%;
          transform: translateX(100%);
          transition: transform 0.5s ease-in;
          z-index:9999
      }
      .navigation li{
          opacity: 100;
      }
      .burger{
          display: block;
      }
      }
  
      .nav-active{
          transform: translateX(0%);
      }
  
      .rectangle{
          text-align: center;
          font-family: athelas, serif;
          font-weight: 400;
          font-style: normal;
          font-size: 14px;
          border-left: 200px solid rgb(190 30 45) ;
          border-right: 200px solid rgb(190 30 45) ;
          margin-top: 20px;
          margin-bottom: 20px;
      }
  
  /* Menu.html CSS styling*/
  
  .container {
      display: flex;
      flex-wrap: wrap-reverse;
      justify-content: center;
      gap: 1rem;
      align-items: center;
  }
  
  .image {
      width: 400px;
      height: 300px;
      object-fit: cover;
      opacity: 65%;
  }
  
  .container-wrapper {
      max-width: 1500px;
      width: 100%;
      margin: 0 auto;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  
  }
  
  .apptext .appborder{
      position: absolute;
      top: 50%;
      left: 36%;
      transform: translate(-50%, -50%);
      border-style: solid;
      border-width: 4px;
      padding: 12px;
      color: white;
      box-shadow: 3px 3px 3px black;
      font-family: athelas, serif;
      font-weight: 400;
      font-style: normal;
      font-size: 40px;
      text-shadow: 3px 3px 3px black ;
      text-decoration: none;
      
  }
  
  .apptext .appborder:hover{
      color: rgb(215 228 194);
  }
  
  a.appmenu:link{
      text-decoration: none;
      }
  
      a.app:visited{
          text-decoration: none;
          }
  
  a.appmenu:hover{
      color: transparent;
  }
  
  a.appmenu:active{
      text-decoration: none;
      }
  
  .souptext .soupborder{
      position: absolute;
      top: 50%;
      left: 64.5%;
      transform: translate(-50%, -50%);
      border-style: solid;
      border-width: 4px;
      padding: 12px;
      color: white;
      box-shadow: 3px 3px 3px black;
      font-family: athelas, serif;
      font-weight: 400;
      font-style: normal;
      font-size: 40px;
      text-shadow: 3px 3px 3px black ;
      text-decoration: none;
          
      }
      
  .souptext .soupborder:hover{
      color: rgb(215 228 194);
      }
      
  a.soupmenu:link{
      text-decoration: none;
      }
      
  a.soupmenu:visited{
          text-decoration: none;
          }
      
  a.soupmenu:hover{
      color: transparent;
      }
      
  a.soupmenu:active{
          text-decoration: none;
          }
  
  .maintext .mainborder{
      position: absolute;
      top: 92%;
      left: 21%;
      transform: translate(-50%, -50%);
      border-style: solid;
      border-width: 4px;
      padding: 12px;
      color: white;
      box-shadow: 3px 3px 3px black;
      font-family: athelas, serif;
      font-weight: 400;
      font-style: normal;
      font-size: 40px;
      text-shadow: 3px 3px 3px black ;
      text-decoration: none;
          
      }
      
  .maintext .mainborder:hover{
      color: rgb(215 228 194);
      }
      
  a.mainmenu:link{
      text-decoration: none;
      }
      
  a.mainmenu:visited{
          text-decoration: none;
          }
      
  a.mainmenu:hover{
      color: transparent;
      }
      
  a.mainmenu:active{
          text-decoration: none;
          }
  
  .desstext .dessborder{
      position: absolute;
      top: 92%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-style: solid;
      border-width: 4px;
      padding: 12px;
      color: white;
      box-shadow: 3px 3px 3px black;
      font-family: athelas, serif;
      font-weight: 400;
      font-style: normal;
      font-size: 40px;
      text-shadow: 3px 3px 3px black ;
      text-decoration: none;
          
      }
      
  .desstext .dessborder:hover{
      color: rgb(215 228 194);
      }
      
  a.dessmenu:link{
      text-decoration: none;
      }
      
  a.dessmenu:visited{
          text-decoration: none;
          }
      
  a.dessmenu:hover{
      color: transparent;
      }
      
  a.dessmenu:active{
          text-decoration: none;
          }
  
  .drinktext .drinkborder{
      position: absolute;
      top: 92%;
      left: 79%;
      transform: translate(-50%, -50%);
      border-style: solid;
      border-width: 4px;
      padding: 12px;
      color: white;
      box-shadow: 3px 3px 3px black;
      font-family: athelas, serif;
      font-weight: 400;
      font-style: normal;
      font-size: 40px;
      text-shadow: 3px 3px 3px black ;
      text-decoration: none;
          
      }
      
  .drinktext .drinkborder:hover{
      color: rgb(215 228 194);
      }
      
  a.drinkmenu:link{
      text-decoration: none;
      }
      
  a.drinkmenu:visited{
          text-decoration: none;
          }
      
  a.drinkmenu:hover{
      color: transparent;
      }
      
  a.drinkmenu:active{
          text-decoration: none;
          }
  </code></pre>
  <p>Javascript linked to both:</p>
  <pre><code>const burger = document.querySelector('.burger');
  const nav = document.querySelector('.navigation');
  
  const navSlide = () =&gt; {
  
  
    nav.classList.toggle('nav-active');
  
   
  }
  
  burger.addEventListener(&quot;click&quot;, () =&gt; {
     navSlide();
  })
  </code></pre>
  <p><a href="https://i.stack.imgur.com/tWxE9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tWxE9.png" alt="File Structure" /></a></p>