按钮 onclick 文档而不是在 JavaScript 文件中使用答案

【问题标题】：button onclick document instead using in JavaScript file按钮 onclick 文档而不是在 JavaScript 文件中使用
【发布时间】：2018-10-13 13:22:03
【问题描述】：

我有一些问题需要写在 js 文件中，而不是单击按钮，请有人帮助我。我写了一些代码，但它不能正常工作。

谢谢

document.getElementById("box1").onclick = function (box) {
    box.style.display = 'block';
};

#box1 {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 260px;
    height: 260px;
    background: #E2E2E2;
    padding: 20px;
    display: none;
}

<ul onclick="document.getElementById('box1').style.display='block'"  class="btn-menu">pop-out Interface</ul>
<h2>More Page Content...</h2>
    <ul  id="box1">
        <li><a href="#" >Homes</a></li>
    </ul>
<h2>

【问题讨论】：

你需要更详细地描述你想要做什么。你在点击什么元素？要显示什么元素？因为，atm，看起来你正试图点击一个隐藏的元素来显示它......？
你好安迪，我需要什么，我只需要在 js 文件中点击操作，他们在按钮 html 上工作，但我想将该代码用于 js 文件示例（var document.getElementById 像这样。）

标签： javascript dom button onclick

【解决方案1】：

这里有一些代码可以在您单击菜单按钮时关闭/打开面板。希望它可以帮助你。它使用数据属性来协调哪个菜单按钮显示哪个面板。

// grab all the menu buttons
const menuButtons = document.querySelectorAll('.btn-menu');

// attach a click event to each button
menuButtons.forEach(button => button.addEventListener('click', toggleButton, false));

function toggleButton() {

  // get the data-id from the clicked element
  const id = this.dataset.id;

  // pick up the panel element with that id
  const panel = document.getElementById(id);
  if (panel.style.display === 'block') {
    panel.style.display = 'none';
  } else {
    panel.style.display = 'block';
  }
}

.panel {
  top: 20px;
  left: 10px;
  width: 100px;
  height: 20px;
  background: #E2E2E2;
  padding: 20px;
  display: none;
}

<ul data-id="box1" class="btn-menu">pop-out Interface</ul>
<ul data-id="box2" class="btn-menu">pop-out Interface 2</ul>
<h2>More Page Content...</h2>
<ul id="box1" class="panel">
  <li><a href="#">Homes</a></li>
</ul>
<ul id="box2" class="panel">
  <li><a href="#">Gardens</a></li>
</ul>

【讨论】：

这是我一直在尝试的。但是代码太长了，当你在 html 中看到它非常简单？但无论如何，谢谢伙计。
时间有点长，因为之前没有的两种状态之间切换的条件，而且它不使用内联JS。这还假设您有多个按钮/面板，并且也适用于这些按钮/面板。
我已经更新了 HTML 来向你展示它是如何与多个按钮一起工作的 @sai
谢谢安迪。我一定会试试的。

【解决方案2】：

如果我理解正确，您正在尝试将您的 js 代码迁移到它自己的文件中，以便能够切换您的元素显示。

elements onclick 方法接受一个函数来在事件触发时执行。我们要做的是在 JS 文件中构建一个函数，将该文件导入到我们的标记中，然后我们可以在 onclick 元素的标记中引用我们的新函数。

function showBox(){           
    document.getElementById("box1")style.display = 'block';
}

function hideBox(){           
    document.getElementById("box1")style.display = 'none';
}

     #box1 {
            
            position: absolute;
            top: 10px;
            left: 10px;
            width: 260px;
            height: 260px;
            background: #E2E2E2;
            padding: 20px;
            display: none;
            
        }

<script src="/path/to/lang-js.js" />

<ul onclick="showBox()" class="btn-menu">pop-out Interface</ul>
        <h2>More Page Content...</h2>
          <ul  id="box1">
            <li><a href="#" >Homes</a></li>

【讨论】：