javascript不會改變我改變的東西

Question

Soo 我有 2 個按鈕，打開側邊欄的按鈕和提交或更改頁面的按鈕。 我犯了一個錯誤，將兩個按鈕 id 都命名為buton ，我將打開的側邊欄更改為buttonMenu

所以我有一個像這樣的 openNav 功能

.js

function openNav() {
    document.getElementById("mySidebar").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
    document.getElementById("buttonMenu").style.visibility = "hidden";
  }

按鈕.php

// Button to open sidebar

<button class="btn btn-label openbtn float-left" id="buttonMenu" onclick="openNav()"><span class="fas fa-bars"></span></button>

// Button to change pages

<button class="btn btn-primary float-right" name="simpan" type="submit" style="margin-bottom:50px;" id="buton">Save</button>

.css

  /* Edited button style */
  #buton{
      background-color: #bdbdbd;
      color: white;
      border : none;
      border-style:solid;
  }

  /* Edited Button Atribut */
  #buton:hover{
      background-color: white;
      color: #bdbdbd;
      border: none;
      border-style:solid;
  }

  /* Edited Menu Button Style */
  #buttonMenu{
      background-color: #bdbdbd;
      color: white;
      border : none;
      border-style:solid;
  }

  /* Edited Menu Button Atribut */
  #buttonMenu:hover{
      background-color: white;
      color: #bdbdbd;
      border: none;
      border-style:solid;
  }

我如何在標題中導入我的 .js 文件

<script type = 'text/javascript' src = "<?php echo base_url();?>js/sidebar.js"></script>

另一個是closeNav() ，它使按鈕可見

但是在我將 id 從函數更改為buttonMenu ，代碼不起作用，但它可以與舊的 id "buton" 。 然后我將這些代碼放在一個單獨的 .js 文件中，而不是在<script> ，但是如果我將這些代碼放在<script>它就可以工作。 這里發生了什么？

Answer 1

您使用內聯onclick或eventlistener嗎？

也許你忘了為新的 id 聲明一些東西

 function openNav() { document.getElementById("mySidebar").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; document.getElementById("buttonMenu").style.visibility = "hidden"; } function closeNav() { document.getElementById("mySidebar").style.width = "0px"; document.getElementById("main").style.marginLeft = "0px"; document.getElementById("buttonMenu").style.visibility = "visible"; }

 <div id="mySidebar" style="overflow-x:hidden;width:0px;background-color:red;position:absolute">xxx</div> <div id="main" style="overflow-x:hidden;background-color:yellow;">main</div> <button id="buttonMenu" onclick="openNav()">openNav</button> <button id="buton" onclick="closeNav()">closeNav</button>