Reihenfolge der Karten

[hardee]

hallo,
ich brauche ein js, das notiert, in welcher reihenfolge eine bestimmte anzahl von karten, die in einem karten-container liegen, angeklickt worden sind und es später in die zwischenablage transportiert
beide scipte funktionieren nicht. was ist daran falsch?

script #1

document.addEventListener('DOMContentLoaded', function() {
    let kartenReihenfolge = [];

    document.querySelectorAll('.card').forEach((card, index) => {
        card.addEventListener('click', function() {
            if (!this.classList.contains('selected')) {
                this.classList.add('selected'); 
                const kartenName = this.querySelector('.card-front').getAttribute('alt');
                const aufDemKopf = this.querySelector('.card-front').style.transform === 'rotate(180deg)';
                kartenReihenfolge.push(`${kartenName} ${aufDemKopf ? '(auf dem Kopf)' : ''}`);
            }
        });
    });
    window.kopiereInZwischenablage = function() {
        const ergebnisText = kartenReihenfolge.join('\n');
        navigator.clipboard.writeText(ergebnisText).then(() => {
            alert("Ergebnisse wurden in die Zwischenablage kopiert.");
        }, (err) => {
            console.error('Fehler beim Kopieren: ', err);
        });
    };
});

script #2

"use strict";

document.addEventListener('DOMContentLoaded', function() {
    let gezogeneKarten = [];

    document.querySelectorAll('.card').forEach(card => {
        card.addEventListener('click', function() {
            if (!this.classList.contains('selected')) {
                this.classList.add('selected');
               
                const kartenName = this.querySelector('.card-front').getAttribute('alt');
                const aufDemKopf = this.querySelector('.card-front').style.display === 'none' ? 'Nein' : 'Ja';
                gezogeneKarten.push({ kartenName, aufDemKopf });

                if (gezogeneKarten.length <= 6) {
                    console.log(`Karte gezogen: ${kartenName}, Auf dem Kopf: ${aufDemKopf}`);
                } else {
                    alert('Du kannst keine weiteren Karten auswählen.');
                }
            }
        });
    });

    function kopiereErgebnisseInZwischenablage() {
        let ergebnisText = 'Deine Auswahl:\n';
        gezogeneKarten.forEach((karte, index) => {
            ergebnisText += `${index + 1}. Karte: ${karte.kartenName}, Auf dem Kopf: ${karte.aufDemKopf}\n`;
        });

        navigator.clipboard.writeText(ergebnisText).then(() => {
            alert("Ergebnisse wurden in die Zwischenablage kopiert.");
        }, (err) => {
            console.error('Fehler beim Kopieren: ', err);
        });
    }

    document.getElementById("ergebnisse-anzeigen").addEventListener("click", kopiereErgebnisseInZwischenablage);
});

[AndreasB]

Hallo.

Ich kann keinen Syntaxfehler erkennen.
Was soll denn passieren und was passiert stattdessen?

Ohne das dazugehörige HTML Können wir dir aber nicht weiter helfen, da der Fehler vermutlich dort liegt.

Grüße
Andreas

[hardee]

Hallo.

Ich kann keinen Syntaxfehler erkennen.
Was soll denn passieren und was passiert stattdessen?

Ohne das dazugehörige HTML Können wir dir aber nicht weiter helfen, da der Fehler vermutlich dort liegt.

Grüße
Andreas

Danke für den Hinweis.

Es geht z.B. um diese Seite: https://seidr.cloud/persoenliche-deutung...hen-kreuz/

Für eine Deutung ist es wichtig zu Wissen, welche Karte als erstes, zweites usw. gezogen worden ist. Und das wollte ich mit diesem Script erreichen, daß diese Information zusammen mit den beiden Angaben aus dem Dropdown-Menü und dem Textfeld in die Zwischenablage transportiert werden. Und das klappt beim besten Willen nicht. Es wird immer nur die Reihenfolge angezeigt, wie die Karten im Container ausgelegt worden sind.

Und dewegen mein Hilferuf.

[AndreasB]

In der Konsole gibt es gleich zwei Fehler: 2x Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

Scheinbar gibt es die Elemente mit den IDs "ergebnisse-anzeigen" und "submit-selection" nicht.
(ich kann die auch nicht auf der Seite Finden)

[hardee]

In der Konsole gibt es gleich zwei Fehler: 2x Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

Scheinbar gibt es die Elemente mit den IDs "ergebnisse-anzeigen" und "submit-selection" nicht.
(ich kann die auch nicht auf der Seite Finden)

Habe im ersten Schritt das Theme gewechselt und in der Console erscheinen bei mir keine Fehlermeldungen mehr. Das Theme selber gefällt mir nicht, aber wichtig war erstmal die Fehlerquelle einzugrenzen.
Jetzt muß ich wohl CSS und JS ein wenig anpassen, denn aktuell bewegt sich da nichts.