horstmann: Flip Card JS richtig einstellen

Dieser Beitrag wurde gesperrt: Ich denke, es wurde alles gesagt.

problematische Seite

Guten Tag , Auf der Seite, der Hauptseite, ganz unten, wo rechts 3 Bilder sind, die Bilder sind als Flip-Karte gemacht, sie werden durch KLICKEN umgedreht. Warum bei Klick auf die Bilder , erste Bild laesst sich flippen und zweite und dritte nicht ?

<script>
const card = document.querySelector(".card__inner");
card.addEventListener("click", function (e) {
card.classList.toggle('is-flipped');
});

</script>

 <div class="card w-full pl-2 pt-6 md:w-1/2 ">
<div class="card__inner ">
<div class=" rounded-lg">
<div class="card__face ">
<img class=" rounded-lg shadow-xl " src="media/img/kreieren_740.JPG"
alt="schuhe Kreieren">
</div>
<div class="card__face--back ">
<img class=" rounded-lg shadow-xl " src="media/img/frau_kreieneren_1_740.JPG"
alt="schuhe Kreieren">
</div>
</div>
</div>
</div>
  1. problematische Seite

    @@horstmann

    Auf der Seite, der Hauptseite, ganz unten, wo rechts 3 Bilder sind, die Bilder sind als Flip-Karte gemacht, sie werden durch KLICKEN umgedreht. Warum bei Klick auf die Bilder , erste Bild laesst sich flippen und zweite und dritte nicht ?

    Weil

    const card = document.querySelector(".card__inner");
    

    das erste Element liefert, das dem Selektor entspricht.

    Du möchtest aber alle Elemente haben, die dem Selektor entsprechen und für jedes einen Eventhandler registrieren. Oder dies in einer Schleife tun.

    Oder event delegation verwenden, d.h. nur einen Eventhandler für ein gemeinsames Vorfahrenelement registrieren und in der Handlerfunktion abfragen, ob der Click auf einem Bild ausgelöst wurde.

    An der Stelle der Hinweis, dass div keine interaktiven Elemente sind und i.A. nicht als Auslöser von Interaktionen herangezogen werden dürfen – es verwenden ja nicht alle Nutzer eine Maus o.ä. Zeigegerät. Per Tastatur lässt sich ein div (ohne weiteres) nicht ansteuern.

    Hier aber die Frage: Wozu der Effekt? Wem ist damit geholfen? Mir scheint: niemandem. Der Effekt ist nur um seiner selbst Willen da – ein sehr schwaches Argument, sowas zu implementieren.

    😷 LLAP

    --
    “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.” —John Lennon
    1. problematische Seite

      wie soll ich dann machen , damit per Klick die Karte gedreht wird ? Gibst eine Varinate ohne js ?

      1. problematische Seite

        Hallo,

        wie soll ich dann machen

        Hat Gunnar doch geschrieben: du sollst gar nicht! Es ist jedenfalls nicht ersichtlich, wofür der Effekt nötig ist.

        Solltest du doch einen Grund haben, dann ist wohl tatsächlich js zu verwenden und als interaktive Elemente im HTML wären Buttons angebracht.

        Gruß
        Kalk

        1. problematische Seite

          Hi there,

          wie soll ich dann machen

          Hat Gunnar doch geschrieben: du sollst gar nicht! Es ist jedenfalls nicht ersichtlich, wofür der Effekt nötig ist.

          Sorry, aber das geht imho etwas zu weit. Oder willst Du tatsächlich den Eindruck stehen lassen, daß man nur implementieren sollte, dessen Notwendigkeit Dir oder dem Gunnar ersichtlich ist? Das kann's ja nicht wirklich sein...

          1. problematische Seite

            @@klawischnigg

            Die Sommerhitze macht einigen hier arg zu schaffen. Drei sind motorisch oder geistig nicht mehr in der Lage, plus und minus zu unterscheiden. Protip: was trinken, kühles Bad/Dusche.

            😷 LLAP

            --
            “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.” —John Lennon
            1. problematische Seite

              Hi there,

              Die Sommerhitze macht einigen hier arg zu schaffen. Drei sind motorisch oder geistig nicht mehr in der Lage, plus und minus zu unterscheiden. Protip: was trinken, kühles Bad/Dusche.

              Als jemand, dessen Domizil den Gestaden der Adria nur zweieinhalb Autostunden fern ist, kann ich nur sagen, mich können wir nicht meinen - ich tippe bereits auf einer Unterwassertastatur...

              1. problematische Seite

                @@klawischnigg

                Als jemand, dessen Domizil den Gestaden der Adria nur zweieinhalb Autostunden fern ist, kann ich nur sagen, mich können wir nicht meinen

                Nein, das tun wir nicht. Du kannst schreiben, was du willst. Du bist nicht verantwortlich dafür, dass andere nicht mit der Bewertungsfunktion klarkommen.

                • ich tippe bereits auf einer Unterwassertastatur...

                Deine Tastatur ist schweißgebadet?

                😷 LLAP

                --
                “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.” —John Lennon
                1. problematische Seite

                  Hi there,

                  • ich tippe bereits auf einer Unterwassertastatur...

                  Deine Tastatur ist schweißgebadet?

                  Ja, die fürchtet sich vor mir. Aber unter Wasser merkt man's nicht...

            2. problematische Seite

              printf('Hallo %s!', ['Du', 'ihr', 'Welt', 'zusammen'][rand(0, 3)]);

              Die Sommerhitze macht einigen hier arg zu schaffen. Drei sind motorisch oder geistig nicht mehr in der Lage, plus und minus zu unterscheiden.

              Fast bin ich geneigt, Teile eines Statements von Joschka Fischer vom 18. Oktober 1984 zu zitieren.

              /K

              1. problematische Seite

                Die Sommerhitze macht einigen hier arg zu schaffen. Drei sind motorisch oder geistig nicht mehr in der Lage, plus und minus zu unterscheiden.

                Fast bin ich geneigt, Teile eines Statements von Joschka Fischer vom 18. Oktober 1984 zu zitieren.

                $statement =~ s/Herr Präsident, //;
                
              2. problematische Seite

                printf('Hallo %s!', ['Du', 'ihr', 'Welt', 'zusammen'][rand(0, 3)]);

                Die Sommerhitze macht einigen hier arg zu schaffen. Drei sind motorisch oder geistig nicht mehr in der Lage, plus und minus zu unterscheiden.

                Fast bin ich geneigt, Teile eines Statements von Joschka Fischer vom 18. Oktober 1984 zu zitieren.

                1. Die Motivation, weshalb hier Nutzer eine Fremdbeitrag (aka nicht von ihm verfasst) bewerten, geht Gunnar genau gar nichts an

                2. Nutzer in übelster Weise zu beleidigen (siehe Zitat ganz oben) und sie als durch die Hitze quasi geistig unzurechnungsfähig oder körperlich behindert darzustellen, nur weil sie einen Beitrag positiv bewerten, welcher offensichtlich seiner Meinung nicht begeistert zustimmt, ist unterstes Niveau und nicht zu dulden.

                /K

                1. problematische Seite

                  Hallo

                  warum regst du dich so auf? Gunnar war der einzige, der konstruktiv geantwortet hat.

                  Gruß
                  Jürgen

                  1. problematische Seite

                    printf('Hallo %s!', ['Du', 'ihr', 'Welt', 'zusammen'][rand(0, 3)]);

                    warum regst du dich so auf? Gunnar war der einzige, der konstruktiv geantwortet hat.

                    Du hältst also Beleidigungen wie

                    Die Sommerhitze macht einigen hier arg zu schaffen. Drei sind motorisch oder geistig nicht mehr in der Lage, plus und minus zu unterscheiden.

                    sowie

                    Nein, das tun wir nicht. Du kannst schreiben, was du willst. Du bist nicht verantwortlich dafür, dass andere nicht mit der Bewertungsfunktion klarkommen.

                    für konstruktiv?

                    /K

                    1. problematische Seite

                      @@kai345

                      Beleidigungen wie […]

                      Nein, das tun wir nicht. Du kannst schreiben, was du willst. Du bist nicht verantwortlich dafür, dass andere nicht mit der Bewertungsfunktion klarkommen.

                      Dass das eine Beleidigung sein soll, halte ich für eine Lüge.

                      😷 LLAP

                      --
                      “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.” —John Lennon
                      1. problematische Seite

                        printf('Hallo %s!', ['Du', 'ihr', 'Welt', 'zusammen'][rand(0, 3)]);

                        Beleidigungen wie […]

                        Nein, das tun wir nicht. Du kannst schreiben, was du willst. Du bist nicht verantwortlich dafür, dass andere nicht mit der Bewertungsfunktion klarkommen.

                        Dass das eine Beleidigung sein soll, halte ich für eine Lüge.

                        Leuten, welche eine dir nicht genehme Bewertung abgeben, zu unterstellen, sie kämen deshalb nicht mit der Bewertungsfunktion klar (implizit: wären also zu dumm dazu) ist definitiv beleidigend.

                        Und mir jetzt Lüge zu unterstellen ist einfach nur erbärmlich.

                        /K

                        1. problematische Seite

                          @@kai345

                          Beleidigungen wie […]

                          Nein, das tun wir nicht. Du kannst schreiben, was du willst. Du bist nicht verantwortlich dafür, dass andere nicht mit der Bewertungsfunktion klarkommen.

                          Dass das eine Beleidigung sein soll, halte ich für eine Lüge.

                          Leuten, welche eine dir nicht genehme Bewertung abgeben, zu unterstellen, sie kämen deshalb nicht mit der Bewertungsfunktion klar (implizit: wären also zu dumm dazu) ist definitiv beleidigend.

                          Definitiv nicht. Das ist eine Tatsachenbehauptung. Der mag man zustimmen oder nicht.

                          Und mir jetzt Lüge zu unterstellen ist einfach nur erbärmlich.

                          Halt mal den Ball flach.

                          😷 LLAP

                          --
                          “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.” —John Lennon
                2. problematische Seite

                  @@kai345

                  1. Die Motivation, weshalb hier Nutzer eine Fremdbeitrag (aka nicht von ihm verfasst) bewerten, geht Gunnar genau gar nichts an
                  1. Wenn die Motivation für Pluspunkte allein die ist, dass betreffendes Posting gegen mich geschossen hat, dann geht mich das schon ein kleines Bisschen was an.
                  1. Nutzer in übelster Weise zu beleidigen (siehe Zitat ganz oben) und sie als durch die Hitze quasi geistig unzurechnungsfähig oder körperlich behindert darzustellen
                  1. Ich habe all meine Gutmütigkeit zusammengenommen und es aufs Wetter geschoben. Ob ich wirklich denke, dass es am Wetter liegt, werden wir nie erfahren.

                  „Übelste Beleidigung“?? Nun lass mal die Kirche im Dorf! Wenn ich das vorgehabt hätte, hätte das ganz anders geklungen.

                  😷 LLAP

                  --
                  “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.” —John Lennon
            3. problematische Seite

              Tach!

              Es ist nicht zu erwarten, dass Gunnar Einsicht zeigt. Deshalb schließe ich an dieser Stelle den Teilthread, da eine weitere Diskussion vergebliche Liebesmüh ist.

              dedlfix.

              1. problematische Seite

                @@dedlfix

                Es ist nicht zu erwarten, dass Gunnar Einsicht zeigt. Deshalb schließe ich an dieser Stelle den Teilthread, da eine weitere Diskussion vergebliche Liebesmüh ist.

                Deine persönliche Ansicht, dass ich es wäre, der hier Einsicht zeigen müsste. Ich teile deine Ansicht nicht. Und andere Moderatoren auch nicht.

                Es schickt sich nicht für einen Moderator, seine persönliche Ansicht kundzutun und gleichzeitig den Thread für Erwiderungen darauf zu schließen.

                😷 LLAP

                --
                “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.” —John Lennon
          2. problematische Seite

            @@klawischnigg

            Sorry, aber das geht imho etwas zu weit. Oder willst Du tatsächlich den Eindruck stehen lassen, daß man nur implementieren sollte, dessen Notwendigkeit Dir oder dem Gunnar ersichtlich ist? Das kann's ja nicht wirklich sein...

            Nein, und das ist es auch nicht.

            Ich hatte das Argument angeführt: „Wem ist damit geholfen? Mir scheint: niemandem.“

            Wenn du ein stichhaltiges Argument vorbringen kannst, wie dieser Effekt zum Thema der Seite passen und die UX verbessern sollte, dann her damit! Dann können wir eine vernünftige sachliche Diskussion führen.

            😷 LLAP

            --
            “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.” —John Lennon
      2. problematische Seite

        @@horstmann

        wie soll ich dann machen , damit per Klick die Karte gedreht wird ?

        Na wie geschrieben:

        const cards = document.querySelector(".card__inner");
        
        cards.forEach(card => {
          card.addEventListener();
        });
        

        oder

        const cards = document.querySelector(".card__inner");
        
        for (let card of cards) {
          card.addEventListener();
        }
        

        oder eben event delegation.


        Gibst eine Varinate ohne js ?

        Da den Effekt niemand(!!) braucht, könnte man hier vielleicht ausnahmsweise den checkbox hack verwenden und label und input per role="presentation" ihre Rollen wegnehmen? ☞ Spieglein, Spieglein an der Wand …

        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. 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.” —John Lennon
        1. problematische Seite

          Dane fuer Ihe Hilfe , das werde ich auch mal versuchen. Aber inzwischen habe ich so die Sache geloest document.querySelectorAll(".card__inner").forEach(c => c.onclick = function () { this.classList.toggle('is-flipped') })

          1. problematische Seite

            @@horstmann

            Aber inzwischen habe ich so die Sache geloest document.querySelectorAll(".card__inner").forEach(c => c.onclick = function () { this.classList.toggle('is-flipped') })

            Du solltest nicht onclick verwenden, sondern addEventListener. Ein Grund ist, dass addEventListener – wie der Name schon sagt – EventListener hinzufügt und nicht andere möglicherweise vorhandenen überschreibt.

            Außerdem: sprechende Variablen verwenden:

            • nicht c, sondern card
            • nicht e, sondern event (gilt auch für die Beispiele im verlinkten Artikel von David Walsh)

            😷 LLAP

            --
            “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.” —John Lennon
        2. problematische Seite

          Hallo Gunnar,

          Spieglein, Spieglein an der Wand …

          Bin ich der einzige, bei dem die @media (prefers-reduced-motion) Query in Chrome (Version 91) nicht funktioniert?

          Ich habe es mit Gunnars Fassung, mit (prefers-reduced-motion:reduce) und mit screen and not (...) probiert. Ich habe im Netz geschaut, ob Chrome einen speziellen Schalter braucht. Nix. Aber im Spieglein Spieglein Codepen werden die Regeln in den media Queries nicht beachtet.

          Ich habe auch noch eine Anti-Query hinzugefügt: @media (prefers-reduced-motion), um im Positiv-Fall etwas sichtbares zu erzeugen - nix.

          FF tut es. Chrome nicht. Edge nicht. Opera auch nicht. Also - alle Chromia nicht. Wasn das?

          Mein Bastel-Fiddle dazu

          Rolf

          --
          sumpsi - posui - obstruxi
    2. problematische Seite

      @@Gunnar Bittersmann

      Hier aber die Frage: Wozu der Effekt? Wem ist damit geholfen? Mir scheint: niemandem. Der Effekt ist nur um seiner selbst Willen da – ein sehr schwaches Argument, sowas zu implementieren.

      Meine Einschätzung erfolgte anhand der Darstellung in meinem Browser: Firefox. Da blickt man nach der Drehung auf die Rückseite desselben Bilds, d.h. man sieht dessen Spiegelbild.

      @Rolf B wies mich darauf hin, dass da doch zwei verschiedene Bilder auf Vorder- und Rückseite seien. Huch‽ Im Browser, den ich tunlichst meide wie die Covid-19, sind da tatsächlich zwei verschiedene Bilder – wobei es beim Umdrehen flackert. Im Safari flackert’s nicht, da springt’s um.

      Das Flackern in Chrome liegt daran, dass du backface-visibility: hidden für das erste <div class="card__face"> gesetzt hast, aber nicht für das zweite <div class="card__face--back">.

      Wenn man BEM nutzt, ist die Klassenangabe auch falsch: “Add modifier classes only to blocks/elements they modify, and keep the original class.” [BEM] Es müsste <div class="card__face card__face--back"> sein.

      Das Umspringen in Safari kommt daher, dass der backface-visibility noch nicht kennt, sondern nur -webkit-backface-visibility. [CanIUse] Also beides angeben.

      Warum das im Firefox nicht funktioniert, ist mir noch ein Rätsel. Zumal man durch backface-visibility: hidden die Rückseite (d.h. das Spiegelbild) doch eigentlich gar nicht sehen können sollte … 🤔

      😷 LLAP

      --
      “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.” —John Lennon
  2. problematische Seite

    @dedlfix : Es ist nicht zu erwarten, dass Gunnar Einsicht zeigt.

    Offen gestanden ist das nicht zu erwarten, weil er auch sehr gute Argumente auf seiner Seite hat. Man könnte deshalb genau so gut vortragen, dass nicht zu erwarten sei, dass andere Einsicht zeigen. In Glaubenskriegen findet genau das ja gegenseitig statt...

    @Gunnar Bittersmann: Es schickt sich nicht für einen Moderator, seine persönliche Ansicht kundzutun und gleichzeitig den Thread für Erwiderungen darauf zu schließen.

    Jepp! Aber es ist nicht nur das: Bei einem solchen Eingriff sollte man wirklich alles vermeiden, wodurch sich jemand persönlich „bekrittelt“ fühlen könnte.

    Ich will nur, dass meine Auffassung zur Kenntnis genommen wird. Was dann mit dem Beitrag geschieht ist mir egal - was hingegen mit der Nachricht geschieht ist es nicht.

    1. problematische Seite

      printf('Hallo %s!', ['Du', 'ihr', 'Welt', 'zusammen'][rand(0, 3)]);

      gemeldet.

      es ist schlimm genug, daß Gunnar seine technische Macht mißbraucht, um in einem dankenswerterweise gesperrten Thread doch noch das letzte Wort zu haben, das Thema dann in einem anderen Teilthread wieder aufzumachen ist vorsätzliches ignorieren der Sperrung

      /K

      1. problematische Seite

        @@kai345

        daß Gunnar seine technische Macht mißbraucht, um in einem dankenswerterweise gesperrten Thread doch noch das letzte Wort zu haben

        war eine Reaktion auf dedlfix’ Machtmissbrauch, um in einem dankenswerterweise gesperrten Thread noch das letzte Wort zu haben. Und ich will @dedlfix hier nicht einmal böse Absicht unterstellen.

        😷 LLAP

        --
        “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.” —John Lennon
        1. problematische Seite

          printf('Hallo %s!', ['Du', 'ihr', 'Welt', 'zusammen'][rand(0, 3)]);

          daß Gunnar seine technische Macht mißbraucht, um in einem dankenswerterweise gesperrten Thread doch noch das letzte Wort zu haben

          war eine Reaktion auf dedlfix’ Machtmissbrauch, um in einem dankenswerterweise gesperrten Thread noch das letzte Wort zu haben. Und ich will @dedlfix hier nicht einmal böse Absicht unterstellen.

          Schreibt es und unterstellst gleichzeitig dedlfix hier sowohl Machtmissbrauch wie auch "daß er das letzte Wort haben will", obwohl er in diesem Thread nicht einmal mitdiskutiert hat. Abenteuerlich.

          /K

    2. Was ich auf keinen Fall wollte ist, dass sich nun gegenseitig neue Vorwürfe gemacht werden.

      Also: Ab an/in den/die See, oder was sonst für die Kühlung von Kopf und Körper geeignet ist. Verzeiht Euch selbst und den anderen.

      Wie ich die Dinge sehe sollte man die unangenehmen bzw. fachfreien Teile der Diskussion (darunter der von mir begonnene Teilzweig) auch kommentarlos entfernen. Der kann nur dazu dienen, unangenehme Gefühle - auch bei Dritten) zu wecken.

  3. problematische Seite

    Hallo,

    ich denke, es wurde alles gesagt, wenn auch noch nicht von jedem. Ich mache dann mal zu.

    Gruß
    Jürgen