function auf mehrere elemente mit gleicher id/class anwenden

[le_fisch]

Hallo,

beim Lernen von Javascript habe ich beim Rumprobieren eine Stelle an der ich nicht weiterkomme:

Ich habe einige divs, die als Button fungieren sollen und alle beim Anklicken das style Attribut eines anderen divs verändern sollen. Das Problem ist, dass das Script nur beim ersten div mit id="button" die gewünschte Funktion hat, bei den restlichen fünf passiert nichts. Ich habe es auch schon mit "getElementsByClassName" versucht, klappt aber auch nicht. Wenn ich jeden "Button" mit inline-JS versehe, dann klappt es. Das will ich aber aus Gründen der Übersichtlichkeit und Einfachheit vermeiden.

Die "Buttons" mit id="button":

                    <!-- Produktkarten -->
                       
                    <div class="content_cardGroup">
                        <div id="button" class="content_card">
                            <div  class="content_card__upper">Artikelbezeichnung</div>
                            <div  class="content_card__mid">card text 1</div>
                            <div  class="content_card__lower">100,00 EUR</div>
                        </div>
                        <div id="button" class="content_card">
                            <div  class="content_card__upper">Artikelbezeichnung</div>
                            <div  class="content_card__mid">card text 1</div>
                            <div  class="content_card__lower">100,00 EUR</div>
                        </div>
                        <div id="button" class="content_card">
                            <div  class="content_card__upper">Artikelbezeichnung</div>
                            <div  class="content_card__mid">card text 1</div>
                            <div  class="content_card__lower">100,00 EUR</div>
                        </div>
                    </div>
                   
                    <div class="content_cardGroup">
                        <div id="button" class="content_card">
                            <div  class="content_card__upper">Artikelbezeichnung</div>
                            <div  class="content_card__mid">card text 1</div>
                            <div  class="content_card__lower">100,00 EUR</div>
                        </div>
                        <div id="button" class="content_card">
                            <div class="content_card__upper">Artikelbezeichnung</div>
                            <div class="content_card__mid">card text 1</div>
                            <div class="content_card__lower">100,00 EUR</div>
                        </div>
                        <div id="button" class="content_card">
                            <div class="content_card__upper">Artikelbezeichnung</div>
                            <div class="content_card__mid">card text 1</div>
                            <div class="content_card__lower">100,00 EUR</div>
                        </div>
                    </div>

Hier das zu ändernde div mit id="modal"

                    <div id="modal" class="modal">
                        <div class="modal_content">
                            <span class="close">&times;</span>
                            <p>Some text in the Modal..</p>
                        </div>
                    </div>

Und das Javascript dazu:

            // Get the modal
            var modal = document.getElementById("modal");

            // Get the button that opens the modal
            var btn = document.getElementById("button");

            // Get the <span> element that closes the modal
            var span = document.getElementsByClassName("close")[0];

            // When the user clicks on the button, open the modal
            btn.onclick = function() 
            {
                modal.style.display = "block";
            }

            // When the user clicks on <span> (x), close the modal
            span.onclick = function() 
            {
                modal.style.display = "none";
            }

            // When the user clicks anywhere outside of the modal, close it
            window.onclick = function(event) 
            {
                if (event.target == modal) 
                {
                    modal.style.display = "none";
                }
            }

Danke im Voraus.

 

[Sempervivum]

IDs müssen immer dokumentweit eindeutig sein. Mit

var btn = document.getElementById("button");

erhältst Du das erste Element mit der ID button und das Resultat ist dieses:

Das Problem ist, dass das Script nur beim ersten div mit id="button" die gewünschte Funktion hat

Ich habe es auch schon mit "getElementsByClassName" versucht, klappt aber auch nicht.

Da warst Du mit Sicherheit auf dem richtigen Wegen. Diese Funktion liefert eine Nodelist, über die musst Du in einer Schleife iterieren und für jedes Element den Listener registrieren.