data-set

Exemple 1

  1. <button data-toggle-id="calendar">
  2.   Show calendar
  3. </button>

  5. <form id="calendar" hidden>
  6.   mois de mai !
  7. </form>


  1.   document.addEventListener('click', function(event) {
  2.     let id = event.target.dataset.toggleId;
  3.     if (!id) return;

  5.     let elem = document.querySelector(`'#${id}'`);
  6.     elem.hidden = !elem.hidden;
  7.   });


https://jsbin.com/wagipuj/edit?html,js,output

Exemple 2

  1. <div id="menu">

  2.   <button data-action="save">Save</button>

  3.   <button data-action="load">Load</button>

  4.   <button data-action="search">Search</button>

  5. </div>


  1. class Menu {

  2.     constructor(elem) {

  3.       this._elem = elem;

  4.       

  5.     }


  7.     save() {

  8.       alert('saving');

  9.     }


  11.     load() {

  12.       alert('loading');

  13.     }


  15.     search() {

  16.       alert('searching');

  17.     }


  19.     onClick(event) {

  20.       let action = event.target.dataset.action;

  21.       if (action) {

  22.         this[action]();

  23.       }

  24.     };

  25.   }


  27.   new Menu(menu);

https://jsbin.com/dufunaf/5/edit?html,css,js,console,output