Beiträge von Sempervivum

Verstehe, so wird das alles jetzt viel klarer.

Zitat

In der Html Datei habe ich dann einige Karten erstellt und mit der hinzufuegen Methode an das Array angehangen. Das klappt soweit auch.

Das bedeutet, dass wir jetzt auf der einen Seite das Array in der Visitenkartenliste haben und auf der anderen die HTML-Elemente. Vermutlich sind beide parallel aufgebaut, aber besser als uns darauf zu verlassen wäre es, eine Referenz im HTML-Element auf das Array in der Visitenkartenliste zu hinterlegen. Dafür eignet sich ein data-Attribut: data-idx="5".

Also den Index beim Hinzufuegen zurück geben und in das data-Attribut eintragen:

    hinzufuegen(name, adresse,telefonnummer, fax) {
        let idx = this.karten.length;
        let k = new Visitenkarte(name, adresse,telefonnummer, fax);
        
        this.karten.push(k);
        return idx;
    }

Und dann im Eventhandler:

            let domObjArr = document.getElementsByClassName('Visitenkarte');
            for(let i=0; i < domObjArr.length; i++)
                domObjArr[i].addEventListener('click', function(){
                    let idx = this.dataset['idx'];
                    let karte = visitenkartenliste.holen(idx);
                    karte.showVisitenkarte();
                });
            }

Wenn man es so macht, braucht man noch die Funktion holen in der Liste, die kannst Du selber hinzufügen. Alles ungetestet.

Zitat

Die Funktion showVisitenkarte ist nicht definiert steht dort. Könnte das daran liegen, dass die Funktion aus der Klasse Visitenkarte kommt und daher noch einen "Bezugspunkt" braucht?

Von Klassen habe ich in dem Code, den Du bisher gepostet hast, nichts gesehen. Dann müsstest Du wieder etwas mehr Code posten.

Zitat

domObjArr[i].showVisitenkarte(i); funktioniert leider auch nicht, laut Konsole ist das keine gültige Funktion.

Nein, das kann so nicht funktionieren, denn bei diesem Element in dem Array gibt es die Funktion nicht.

Das ist mir die ganze Zeit schon aufgefallen: Dieses domObjArr ist ja eine Nodelist, d. h. im wesentlichen ein Array von DOM-Elementen. Und aus diesen Elementen müsstest Du den Text erst heraus lesen. Einfacher wäre es, das Array zu verwenden, das die Basis für die erste Tabelle ist.

Die Elemente, die eine ID haben, sind ja offenbar das Ziel wo die Daten hin sollen. Dann müsste es so aussehen:

function showVisitenkarte(i){
    document.getElementById('name').innerHTML =  this.name;
    document.getElementById('adresse').innerHTML =  this.adresse
    // usw.
    // Bei einem Eventhandler macht ein Rückgabewert keinen Sinn
}

Dann habe wir allerdings aneinander vorbei geredet. Eine Tabelle ist hier eigentlich fehl am Platz aber das wollen wir mal nicht so eng sehen.

Wir können dann das mit den Zeilen in der zweiten Tabelle weg lassen und Du kannst, wie Du es anfangs vor hattest, mit innerHTML die Daten in die Tabellenzellen übertragen:

        // Array mit den Visitenkarte bereit stellen:
        const domObjArr = document.getElementsByClassName('Visitenkarte');
        function showVisitenkarte(idx) {
            const dieVisitenkarte = domObjArr[i];
            // jetzt brauchst Du nur noch die Werte aus der Visitenkarte zu lesen
            // und mit innerHTML in die zweite Tabelle einzutragen
        }
        // ueber alle Visitenkarten:
        for (let i = 0; i < domObjArr.length; i++) {
            // Eventlistener fuer Klick registrieen:
            domObjArr[i].addEventListener('click', function () {
                // Funktion showVisitenkarte mit Index als Parameter aufrufen
                showVisitenkarte(i);
            });
        }

Dann liegen wir doch gar nicht weit auseinander. Die neue Tabelle macht nur Sinn, wenn sie Platz bzw. Zeile für mehrere Visitenkarten hat?

Es wäre aber, denke ich, angebracht, wenn Du auch die Tabellen mal posten würdest, Du kannst sie ja auf 2 oder 3 Zeilen kürzen.

Nein, mit innerHTML warst Du nicht auf dem Holzweg, Du musst den Code oben ja noch ergänzen und beim Eintragen in die Tabellenzellen wirst Du es benötigen.

Auch mit den IDs warst Du nicht auf dem Holzweg, es wäre auch damit gegangen, nur müssten dann alle Zellen der Tabelle mit einer ID ausgestattet sein. Du schriebst, dass die Tabelle vorgegeben ist und ich wusste nicht, ob Du dort IDs eintragen kannst.

Versuche dieses zu vervollständigen:

        // Zeilen der Tabelle bereit stellen:
        const rows = document.querySelector('table').rows;
        // Array mit den Visitenkarte bereit stellen:
        const domObjArr = document.getElementsByClassName('Visitenkarte');
        function showVisitenkarte(idx) {
            const dieVisitenkarte = domObjArr[i];
            const dieZeile = rows[i];
            // auf die Zellen kannst Du jetzt mit dieZeile.cells[0] usw.
            // zugreifen und die Texte aus der Visitenkarte eintragen
        }
        // ueber alle Visitenkarten:
        for (let i = 0; i < domObjArr.length; i++) {
            // Eventlistener fuer Klick registrieen:
            domObjArr[i].addEventListener('click', function () {
                // Funktion showVisitenkarte mit Index als Parameter aufrufen
                showVisitenkarte(i);
            });
        }

Und benutze beim Posten von Code bitte Codetags, das Symbol </> oben rechts.

Zu querySelector siehe hier:

https://wiki.selfhtml.org/wiki/JavaScrip…t/querySelector

In Zeile 1 werden damit die Zeilen in der Tabelle ermittelt.

In deiner Funktion showVisitenkarte musst Du dann die Zellen der Tabelle füllen. Die Daten liegen ja dort in this vor.

Leider hast Du immer noch das Einbinden von jQuery ganz am Schluss drin:

    <script src="assets/js/PHP-Contact-Form-dark-1.js"></script>
    
    <!-- das folgende muss geloescht werden: -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

</body>
</html>

Wie oben schon geschrieben: Dadurch werden die durch die Skript hinzu gefügten Funktionen wieder gelöscht. Wirf einen Blick in die Console.

Ich würde das nicht mit IDs aufziehen, denn dann bist Du davon abhängig, dass die Tabellenzellen IDs haben. Du kannst problemlos auf die Zeilen und Zellen der Tabelle mit Indizes zugreifen, diese Demo zeigt es:

            const rows = document.querySelector('table').rows;
            for (let i = 0; i < rows.length; i++) {
                const theRow = rows[i];
                for (let j = 0; j < theRow.cells.length; j++) {
                    const theCell = theRow.cells[j];
                    console.log(theCell.textContent);
                }
            }

Offene Frage: Wie wird die Zeile ausgewählt? Immer die erste Zeile füllen, die noch nicht belegt istß

Am besten den geänderten Stand mit Zeilenumbrüchen hoch laden, damit man es sich in Aktion ansehen kann.

Hat denn das Versenden zuvor funktioniert, als noch eine neue Seite geladen wurde?

Ich hatte mir das früher angesehen und dieses:

    <script src="assets/js/PHP-Contact-Form-dark.js"></script>
    <script src="assets/js/PHP-Contact-Form-dark-1.js"></script>

schienen mir die Javascripts für das Abschicken des Formulars und die Validierung zu sein.

d. h. Zeile 6 ist wahrscheinlich entbehrlich.

Und Zeile 17 löschen, das jQuery muss ganz am Anfang eingebunden sein und ist es auch in Zeile 1. Bindest Du es am Schluss ein, werden die Funktionen, die die anderen Skripts hinzu fügen, wieder gelöscht.

Auf kulturbewegung.de fehlen auch die Zeilenumbrüche, vor ein paar Tagen war das noch nicht der Fall. Möglicher Weise hast Du in VS-Code etwas verstellt?

Hast Du mal eine Blick in die Console geworfen? Dort werden einige Fehler angezeigt. Der Grund ist, dass Du jQuery mehrfach eingebunden hast und dass die Reihenfolge nicht stimmt.

    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
    <script src="assets/js/parallax.min.js"></script>
    <script src="assets/js/cookies.js"></script>
    <script src="assets/js/navbar.js"></script>
    <script src="assets/js/PHP-Contact-Form-dark.js"></script>
    <script src="assets/js/PHP-Contact-Form-dark-1.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

So wäre es richtig:

    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
    <script src="assets/js/parallax.min.js"></script>
    <script src="assets/js/cookies.js"></script>
    <script src="assets/js/navbar.js"></script>
    <script src="assets/js/PHP-Contact-Form-dark.js"></script>
    <script src="assets/js/PHP-Contact-Form-dark-1.js"></script>

Die vertikale Anordnung der Container kannst Du ähnlich leicht mit flex-direction: column; für .card erreichen.

PS: Ist das diese Seite?

http://kulturderbewegung.de

Wie ich sehe, benutzt das Javascript jQuery und einen Validator. Möglicher Weise ist der Grund, dass Du auf die neue Seite gelangst, dass Du jQuery nicht eingebunden hast. Binde es ein, frage deinen Bekannte, welcher Validator das ist und binde diesen ebenfalls ein.

BTW: Du hast zwar erfreulicher Weise Codetags benutzt aber irgend wie ist mit dem Code etwas falsch gelaufen, weil die Zeilenumbrüche fehlen.

Wenn beides auf der selben Seite liegt, braucht es kein Sessionstorage. Aber, wie schon geschrieben, man müsste das Quiz-Skript kennen, um zu wissen, wie man an die Daten heran kommt. Wenn es nicht zu umfangreich ist, dann poste es doch Mal. In Codetags, das </> in der Werkzeugleiste oben.

So richtig hast Du meine Frage noch nicht beantwortet: Liegen Tabelle und Chart nun auf verschiedenen Seiten? D. h. Tabelle auf Seite A und Chart auf Seite B?

Da kann es verschiedene Möglichkeiten geben. Um dir eine empfehlen zu können, muss man mehr über diese Skripts wissen. Ich nehme mal an, Du hast nur eine HTML-Seite und willst die Daten dort sowohl in der Tabelle als auch in dem Piechart anzeigen lassen?

Am besten wäre es, wenn Du das online hättest, damit man es sich in Aktion ansehen kann.

PS: Es geht auch ohne den zusätzlichen Container figure:

https://jsfiddle.net/Sempervivum/yofhgdbx/

Das geht ganz gut mit Flexlayout:

https://jsfiddle.net/Sempervivum/j5w7pasv/2/