We have two buttons with the same data-show-dialog selector. The first button found when clicking opens a modal window, and the second one does not work. How to make both buttons work with the above mentioned same selectors?

 var dialog = document.querySelector('#dialog-contact'); var showDialogButton = document.querySelector('[data-show-dialog]'); if (!dialog.showModal) { dialogPolyfill.registerDialog(dialog); } showDialogButton.addEventListener('click', function() { dialog.showModal(); }); dialog.querySelector('.close').addEventListener('click', function() { dialog.close(); }); 
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> <button data-show-dialog class="mdl-button mdl-js-button"> Обратиться </button> <button data-show-dialog class="mdl-button mdl-js-button "> Задать вопрос </button> <dialog class="mdl-dialog" id="dialog-contact"> <div class="mdl-dialog__actions"> <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"> Отправить </button> <button type="button" class="mdl-button mdl-js-ripple-effect close"> Закрыть </button> </div> </dialog>

  • 2
    querySelector returns the first matching item, to get everything you need to use querySelectorAll , and bypass the resulting collection in a loop - Grundy
  • @Grundy worked, thank you. - Lolo Ogly
  • in general, all this is somehow unnatural, there is an id , use it, or insert buttons into one div, and listen to events there, and on the handler, differentiate by the same id - Sublihim

1 answer 1

The problem is that document.querySelector returns the first matching element. In order to return everything , you need to use document.querySelectorAll , or a similar function returning the collection, and add a handler passing through the elements of the collection in a loop.

For example:

 var showDialogButtons = document.querySelectorAll('[data-show-dialog]'); [...showDialogButtons].forEach(showDialogButton => showDialogButton.addEventListener('click', function() { dialog.showModal(); })); 

 var dialog = document.querySelector('#dialog-contact'); var showDialogButtons = document.querySelectorAll('[data-show-dialog]'); if (!dialog.showModal) { dialogPolyfill.registerDialog(dialog); } [...showDialogButtons].forEach(showDialogButton => showDialogButton.addEventListener('click', function() { dialog.showModal(); })); dialog.querySelector('.close').addEventListener('click', function() { dialog.close(); }); 
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script> <button data-show-dialog class="mdl-button mdl-js-button"> Обратиться </button> <button data-show-dialog class="mdl-button mdl-js-button "> Задать вопрос </button> <dialog class="mdl-dialog" id="dialog-contact"> <div class="mdl-dialog__actions"> <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored"> Отправить </button> <button type="button" class="mdl-button mdl-js-ripple-effect close"> Закрыть </button> </div> </dialog>