//wait for HTML document and all scripts to download and execute window.addEventListener('DOMContentLoaded', () => { const openButtons = document.querySelectorAll('[data-open-modal]') const closeButtons = document.querySelectorAll('dialog button.cls') //iterate through list of buttons openButtons.forEach( (button) => { //select button that has been clicked on button.addEventListener('click', (event) => { const target = event.target.getAttribute('data-open-modal') //open dialog for button clicked document.querySelector(`dialog[data-modal='${target}']`).showModal() }) }) //repeat steps for open-modal closeButtons.forEach( (button) => { button.addEventListener('click', (event) => { event.target.parentNode.close() }) }) });