Why doesn't the button for a slide open menu work when i go to a different page but on the main-CodePudding

Basically, I'm making a site on repl.it. On my main page, I have this drop-down menu that allows me to go to the other pages, but for some reason when I paste the same exact code into another page and I try and open the menu, it doesn't respond. I honestly Don't really know what to try since I'm new to coding and when I searched up the question, it didn't really help.

Website: https://warfare.blackenxrgy.repl.co/

HTML:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

  h2 {
    margin-left: 45%;
  }

  #weaponsah {
     padding: 8px 8px 8px 32px;
    background-color: transparent;
    color: #818181;
    border: none;
  transition: 0.3s;
    font-size: 25px;
  }

  #weaponsah:hover {
    color: #f1f1f1;
  }

    #tacticsah {
     padding: 8px 8px 8px 32px;
    background-color: transparent;
    color: #818181;
    border: none;
  transition: 0.3s;
    font-size: 25px;
  }

  #tacticsah:hover {
    color: #f1f1f1;
  }

  p {
    margin-left: 40%;
  }

#key {
  color: blue;
  margin-top: 44%;
  margin-left: 86%;
  font-size: 10px;
}

      #superpowersah {
     padding: 8px 8px 8px 32px;
    background-color: transparent;
    color: #818181;
    border: none;
  transition: 0.3s;
    font-size: 25px;
  }

  #superpowersah:hover {
    color: #f1f1f1;
  }

  p {
    margin-left: 40%;
  }

#weaponsma {
     padding: 8px 8px 8px 32px;
    background-color: transparent;
    color: #818181;
    border: none;
  transition: 0.3s;
    font-size: 25px;
  }

  #weaponsma:hover {
    color: #f1f1f1;
  }

  #tacticsma {
     padding: 8px 8px 8px 32px;
    background-color: transparent;
    color: #818181;
    border: none;
  transition: 0.3s;
    font-size: 25px;
  }

  #tacticsma:hover {
    color: #f1f1f1;
  }

  #superpowersma {
     padding: 8px 8px 8px 32px;
    background-color: transparent;
    color: #818181;
    border: none;
  transition: 0.3s;
    font-size: 25px;
  }

  #superpowersma:hover {
    color: #f1f1f1;
  }

  #weaponsmma {
     padding: 8px 8px 8px 32px;
    background-color: transparent;
    color: #818181;
    border: none;
  transition: 0.3s;
    font-size: 25px;
  }

  #weaponsmma:hover {
    color: #f1f1f1;
  }

    #tacticsmma {
     padding: 8px 8px 8px 32px;
    background-color: transparent;
    color: #818181;
    border: none;
  transition: 0.3s;
    font-size: 25px;
  }

  #tacticsmma:hover {
    color: #f1f1f1;
  }

    #superpowersmma {
     padding: 8px 8px 8px 32px;
    background-color: transparent;
    color: #818181;
    border: none;
  transition: 0.3s;
    font-size: 25px;
  }

  #superpowersmma:hover {
    color: #f1f1f1;
  }
  
</style>
</head>
<body>

<div id="mySidenav" >
  <a href="javascript:void(0)"  onclick="closeNav()">&times;</a>
  <button id="weaponsah" onclick="weaponsah()" href="#">WeaponsAH</button>

  
  <button id="tacticsah" onclick="tacticsah()" href="#">TacticsAH</button>

  
  <button id="superpowersah" onclick="superpowersah()" href="#">SuperpowersAH</button>

  
  <button id="weaponsma" onclick="weaponsma()" href="#">WeaponsMA</a>

    
    <button id="tacticsma" onclick="tacticsma()" href="#">TacticsMA</button>
    
    <button id="superpowersma" onclick="superpowersma()" href="#">SuperpowersMA</button>
    
    <button id="weaponsmma" onclick="weaponsmma()" href="#">Weapons*MA</button>
    
    <button id="tacticsmma" onclick="tacticsmma()" href="#">Tactics*MA</button>
    
    <button id="superpowersmma" onclick="superpowersmma()"href="#">Superpowers*MA</button>
</div>

<h2> Evolution of Warfare</h2>
<p>Weapons, Tactics, and Super Powers throughout history.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Subtopics</span>


  <div id="key">(AH = Ancient History, MA = Middle Ages, *MA = Modern Age)</div>
<script src="script.js"></script>
   
</body>
</html>

JS:

  location.href="Ancient History/weaponsah.html"
}


function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

function tacticsah() {
  location.href="Ancient History/tacticsah.html"
}

function superpowersah() {
  location.href="Ancient History/superpowersah.html"
}

 function weaponsma() {
  location.href="Middle Age/weaponsma.html"
} 

 function tacticsma() {
  location.href="Middle Age/tacticsma.html"
} 

function superpowersma() {
  location.href="Middle Age/superpowersma.html"
} 

function weaponsmma() {
  location.href="Modern Age/weaponsmma.html"
} 

function tacticsmma() {
  location.href="Modern Age/tacticsmma.html"
}

function superpowersmma() {
  location.href="Modern Age/superpowersmma.html"
}

this is the code I use and I basically just copied and pasted it into the other pages that I have, but on the other pages, it doesn't work at all and the sidebar menu doesn't work. Any Ideas?

CodePudding user response：

the reason is because after redirection the script.js file is not loaded it has taken the wrong path,try with absolute path

<script src="https://warfare.blackenxrgy.repl.co/script.js"></script>

For the link to work, in your script.js, please like this - I have added sample code

var domain = location.origin;

function tacticsah() {
  location.href= domain   "/Ancient History/tacticsah.html"
}