нажмите кнопку документа вместо использования в файле JavaScript

Question

У меня есть проблема, которую мне нужно написать в 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>

Answer 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>

Answer 2

Если я правильно понимаю, вы пытаетесь перенести свой js-код в свой собственный файл, чтобы иметь возможность переключать отображение элементов.

Метод elementsclc принимает функцию, которая выполняется при запуске события,Что нам нужно сделать, это построить функцию в 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>