button class"button-link"

[black79]

hallo,

habe mehrere Button,s mit der gleichen class="button-link"  die ein Dialog öffnen sollen.

Code:

const dialogLinkOpen = document.getElementById('dialogLinkOpen');
let buttonLink = document.querySelector('.button-link');

if (buttonLink) {
    buttonLink.addEventListener('click', () => {
        dialogLinkOpen.show();
    });
}

 der erste Button funktioniert, die anderen nicht!

[Sempervivum]

document.querySelector liefert nur ein Element und zwar das erste, wenn es mehrere sind, auf die der Selektor zutrifft. Also genau was Du bei deinem Script beobachtest. Zwei Möglichkeiten um es zum Laufen zu bringen:

1.
Verwende  document.querySelectorAll das liefert alle Elemente, auf die der Selektor zutrifft. Dann kannst mit forEach für jedes einzelne davon einen Eventlistener registrieren.

2.
Mache dir das Eventbubbling zu Nutze, das ist ein wenig eleganter und hat noch mehr Vorteile, wie Du in einem früheren Thread gesehen hast. Geht auch ohne jQuery:

Code:

const dialogLinkOpen = document.getElementById('dialogLinkOpen');

// Eventlistener registrieren, der feuert wenn irgend wo
// auf der Seite geklickt wird:
window.addEventListener('click', event => {
    // Prüfen ob ein Button mit der Klasse "button-link"
    // geklickt wurde (event.target ist das Element,
    // das geklickt wurde):
    if (event.target.classList.contains('button-link') {
        // Das Dialog-Element öffnen:
        dialogLinkOpen.show();
    }
});