为什么当我转到另一个页面时，幻灯片打开菜单的按钮不起作用，但在主页上却起作用了？

Question

基本上，我正在 repl.it 上创建一个站点。在我的主页上，我有一个下拉菜单，可以让我转到其他页面，但出于某种原因，当我将完全相同的代码粘贴到另一个页面并尝试打开菜单时，它没有响应。老实说，我真的不知道该尝试什么，因为我是编码新手，当我搜索这个问题时，它并没有真正帮助。

网站：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" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" 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"
}

这是我使用的代码，我基本上只是将它复制并粘贴到我拥有的其他页面中，但在其他页面上，它根本不起作用，边栏菜单也不起作用。有什么想法吗？

Answer 1

原因是因为重定向后 script.js 文件没有加载它走错了路径，尝试绝对路径

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

为了使 link 正常工作，请在您的 script.js 中点赞 - 我已经添加了示例代码

var domain = location.origin;

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

为什么当我转到另一个页面时，幻灯片打开菜单的按钮不起作用，但在主页上却起作用了？

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

html

javascript

web