@@horstmann > wie soll ich dann machen , damit per Klick die Karte gedreht wird ? Na wie geschrieben: ~~~js const cards = document.querySelector(".card__inner"); cards.forEach(card => { card.addEventListener(…); }); ~~~ oder ~~~js const cards = document.querySelector(".card__inner"); for (let card of cards) { card.addEventListener(…); } ~~~ oder eben [event delegation](https://davidwalsh.name/event-delegate){:@en}. --- > Gibst eine Varinate ohne js ? Da den Effekt niemand(!!) braucht, könnte man hier vielleicht ausnahmsweise den *checkbox hack*{:@en} verwenden und `label` und `input` per `role="presentation"` ihre Rollen wegnehmen? ☞ [Spieglein, Spieglein an der Wand …](https://codepen.io/gunnarbittersmann/pen/mdWvjam?) Beachte, die Spielerei in einen `@media not (prefers-reduced-motion)`-Block einzuschließen. Das gilt auch für die JavaScript-Variante. 😷 LLAP PS: Du [plenkst](https://de.wikipedia.org/wiki/Plenk). Im Deutschen steht vor Fragezeichen kein Leerzeichen. -- *“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”*{:@en} —John Lennon {:@en}

@@horstmann > wie soll ich dann machen , damit per Klick die Karte gedreht wird ? Na wie geschrieben: ~~~js const cards = document.querySelector(".card__inner"); cards.forEach(card => { card.addEventListener(…); }); ~~~ oder ~~~js const cards = document.querySelector(".card__inner"); for (let card of cards) { card.addEventListener(…); } ~~~ oder eben *event delegation*{:@en}. --- > Gibst eine Varinate ohne js ? Da den Effekt niemand(!!) braucht, könnte man hier vielleicht ausnahmsweise den *checkbox hack*{:@en} verwenden und `label` und `input` per `role="presentation"` ihre Rollen wegnehmen? ☞ [Spieglein, Spieglein an der Wand …](https://codepen.io/gunnarbittersmann/pen/mdWvjam?) Beachte, die Spielerei in einen `@media not (prefers-reduced-motion)`-Block einzuschließen. Das gilt auch für die JavaScript-Variante. 😷 LLAP PS: Du [plenkst](https://de.wikipedia.org/wiki/Plenk). Im Deutschen steht vor Fragezeichen kein Leerzeichen. -- *“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”*{:@en} —John Lennon {:@en}

@@horstmann > wie soll ich dann machen , damit per Klick die Karte gedreht wird ? Na wie geschrieben: ~~~js const cards = document.querySelector(".card__inner"); cards.forEach(card => { card.addEventListener(…); }); ~~~ oder ~~~js const cards = document.querySelector(".card__inner"); for (let card of cards) { card.addEventListener(…); } ~~~ --- > Gibst eine Varinate ohne js ? Da den Effekt niemand(!!) braucht, könnte man hier vielleicht ausnahmsweise den *checkbox hack*{:@en} verwenden und `label` und `input` per `role="presentation"` ihre Rollen wegnehmen? ☞ [Spieglein, Spieglein an der Wand …](https://codepen.io/gunnarbittersmann/pen/mdWvjam?) Beachte, die Spielerei in einen `@media not (prefers-reduced-motion)`-Block einzuschließen. Das gilt auch für die JavaScript-Variante. 😷 LLAP PS: Du [plenkst](https://de.wikipedia.org/wiki/Plenk). Im Deutschen steht vor Fragezeichen kein Leerzeichen. -- *“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”*{:@en} —John Lennon {:@en}