时间戳

首页 > 解决方案 > javascript不会改变我改变的东西

javascript - javascript不会改变我改变的东西

问题描述

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 从 functions 更改为 之后buttonMenu，代码不起作用，但它适用于旧 id "buton"。然后我把这些代码放在一个单独的 .js 文件中，而不是放在 .js 文件中<script>，但是如果我把这些代码放在里面<script>，它就可以工作。这里发生了什么？

标签： javascript

解决方案

您使用内联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>

推荐阅读