клик по button: вывод к console

by Aleksandr Tomashov

HTML

<div id="menu1"></div> 
 <div id="menu2"></div>

CSS

.menu--closed .menu__body {
  display: none;
}

.menu__title {
  cursor: pointer;
}

.js-hidden {
  display: none;
}

JavaScript

'use strict'


class Menu {
 
  constructor(options) {
    
    this._element = options.element;
    this._title = options.title;
    this._options = options.option;
    this._render();
    this._addListeners();
  }
  
  _render() {
    let html = '';
    
    this._element.classList.add('menu');
    
    for ( let key of this._options) {
      html += `
      <li 
      class="menu__item"
      data-value="${ key }"
      >
      <span>*</span>
      ${ key }
      </li>`
    } 

    this._element.innerHTML = `
      <span class="menu__title">${ this._title }</span>
      <div class="menu__body">
      <ul class="menu__list">
      ${ html }  
      </ul>
      <input class="menu__new-option-field">
      <button class="menu__add-button">add item</button>
      </div>  
    `;
  } 
   
  _addListeners() {
    this._element.querySelector('.menu__title').onclick = () => {
      this._element.classList.toggle('menu--closed');  
    };

    for( let item of this._element.querySelectorAll('.menu__item')) {
      item.addEventListener('click', () => {
        console.log(item.dataset.value);
      });
    }
  }
}

let menu = new Menu({
  element: document.querySelector('#menu1'), 
  title: 'Menu 1',
  option: [1, 2, 3]
});