Beiträge von Sempervivum

Um dieses Problem zu lösen müsste man das Ganze im Zusammenhang sehen. Poste das HTML und CSS oder am besten die URL der Seite.

Im Moment ist meine Zeit ein wenig knapp, vielleicht findet sich jemand anders und nimmt sich des Problems an.

Wie schon geschrieben wäre es am besten wenn Du das online stellen könntest. Hast Du überhaupt Webspace?

Zitat

Ich frage mich auch welche Checklist ich bei solchen Fehlern durchgehen müsste.

Dafür gibt es keine generelle Regel. Man muss sich das abhängig vom Fehler, der auftritt, überlegen.

Zitat

IDs und Klassen kontrolliert.

Das habe ich auch gemacht und bemerkt, dass das Element "deck-container" mit getElementById ermittelt wird, im HTML steht dies jedoch als Klasse.

PS: Wenn ich mir deinen Code ansehe, finde ich nur einen Eventlistener für den Button für das Austeilen. Keinen für das Aufdecken und auch keinen für das Mischen. Du musst die noch hinzu fügen.

Zitat

wie gehst du in solchen fällen vor?

Bist Du schon mit den Entwicklerwerkzeugen deines Browser vertraut? Vor allem der Debugger wäre bei JS sehr hilfreich. Du kannst damit den Ablauf des Skripts verfolgen, Variablen ansehen etc. ohne jedes Mal Ausgaben mit console.log einbauen zu müssen.

Zitat

Hast du eine Idee wie ich den Code am besten sagen kann im welchen Bereich noch Runde 1 von 4 Runden (4 Leben jeder Spieler) ist?

Die KI hat mir gesagt, dass ich pro aus teil klick messen könnte welche Runde gerade ist. Und den Button dann bis zur nächsten runde sperre. Das klingt mir aber irgendwie zu unüblich und nicht als Best Practise. Wie würdest du das machen ?

Das verstehe ich jetzt nicht, vermutlich weil ich das Spiel und die Regeln nicht kenne. Kannst Du es genauer erklären?

Zitat

Jetzt lassen sich auf einmal doch die Karten austeilen, es lag wohl an der Reihenfolge der Codeabfolge. Ich fülle die Kind Elemente von Stapel mit Script generierten IMG-Tags, weil ich die Vorderseiten der Karten aus dem Backend erst ausliefere(damit niemand auf die Idee kommt über Element untersuchen zu schummeln).

Vollständig verstehe ich das nicht aber ich vermute: Du zeigst erst nur die Rückseiten der Karten an und lädst die Vorderseiten dann mit Ajax nach. Allerdings finde ich das nicht in dem Code, den Du angehängt hattest. Aber wenn Du etwas nachlädst findet das fast immer asynchron statt und das kann zu Problemen führen. Hast Du das Spiel schon online? Es wäre hilfreich, wenn man es sich in Aktion ansehen könnte.

Ja, das hilft schon Mal weiter, die Buttons etc. sind da. Allerdings fehlt der Kern der Sache, nämlich der Stapel. Das div ist leer und wird wahrscheinlich durch den GET-Request gefüllt. Um testen zu können habe ich es rasch von Hand mit 10 Elementen gefüllt:

    <div class="stapel">
        <div>0</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>

Damit funktioniert jedoch das Geben der Karten einwandfrei, 3 x 3 werden auf die Spieler verteilt und eine bleibt im Stapel.

Das kann ich mir jetzt nur so erklären, dass der originale Stapel bei dir anders aussieht. Poste doch auch mal das HTML des Stapels aus der Quelltextansicht des Browsers.

Hallo tacodek und willkommen im Forum!

Wenn Du Code postest, benutze bitte Codetags, das Symbol <> in der Werkzeugleiste oben. In deinem Fall wurden manche Zeichenfolgen in Smilies umgewandelt.

Dann ist es, wenn man den Fehler finden will, am einfachsten, wenn man eine Testdatei anlegt. Dafür fehlt aber das HTML. Poste das bitte ebenfalls.

Ist das das selbe Problem wie auf html-forum?

Zitat

Ich würde gern an dem Aufbau festhalten.

Bin für jeden Lösungsansatz dankbar.

Das widerspricht sich irgend wie. Manchmal kann man den Pelz des Bären nicht waschen ohne ihn nass zu machen.

Ratsam wäre:

Das HTML zu bereinigen indem Du überfüssige Container entfernst.

Semantische Tags zu verwenden. Hier würde sich <figure> anbieten.

Auf Bootstrap zu verzichten, da veraltet. Statt dessen die Container mit Flex- oder Gridlayout anordnen.

Guten Abend Karin und willkommen im Forum!

Nicht so schön ist, dass dein Skript noch jQuery benutzt aber das wird die Funktion nicht beeinträchtigen.

Die maximale Größe der hochgeladenen Datei wird durch die Einstellungen deines Servers begrenzt. Das Skript liest diese aus und vergleicht sie mit der Datei, die hoch geladen wird. Du musst mit deinem Provider sprechen ob es möglich ist, diese Werte in php.ini zu vergrößern.

Ich wollte zunächst vorschlagen, die Werte mit ini_set zu vergrößern, aber das wird nicht gehen, siehe hier:

https://stackoverflow.com/questions/2184513/change-the-maximum-upload-file-size

Wenn Du auf diese Weise nicht zum Ziel kommst, melde dich wieder, möglicher Weise gibt es noch eine andere Möglichkeit.

Zitat

Vielleicht hat auch jemand von Euch ein weniger umfangreiches Script, das meine Anforderunge erfüllt

Das Skript ist deshalb so umfangreich weil es relativ viel leistet, einschl. einer Anzeige des Fortschritts beim Hochladen. Wenn man das weg lässt, kann man es allerdings vereinfachen und auf fetch statt XMLHttpRequest umstellen.

Guten Morgen Ralf und willkommen im Forum!

Wie öffnest Du denn die index.html? Ich vermute mal, lokal durch Doppelklick auf dem Laptop oder Antippen auf dem Handy? Aber ohne lokalen Webserver. Das funkioniert dann auf dem Laptop aber nicht auf dem Handy.

Du kannst auf dem Handy den CX-Explorer installieren, der hat einen intgrierten Webserver und damit funktioniert das Batrachten von HTML-Seiten.

Aber irgend wann wirst Du sowieso Webspace brauchen und dann erübrigt sich das Problem.

Beste Grüße, Ulrich

Hallo edel242 und willkommen im Forum!

Wann soll das Einfügen denn passieren, ich nehme an, gleich beim Laden der Seite?

Alternativ zu den Lösungen, die Du schon gefunden hast, kannst Du innerHTML() oder insertAdjacentHTML() verwenden.

Die Abfrage müsste so aussehen:

const bdy = document.querySelector('body');
switch (bdy.id) {
    case 'home':
        // HTML für Home einfügen
        break;
    case 'kita':
        // HTML für Kita einfügen
        break;
    // usw.
}

(ungetestet)

Versuche, ob Du damit zum Ziel kommst und melde dich wieder, wenn nicht.

Lagere die Definition der Funktion in ein script-Tag aus. Und wenn Du den Code dann noch sinnvoll einrückst, wird das Ganze gleich viel übersichtlicher:

    <div style="text-align: center; font-size: 13px; margin-top: 10px;">

        <a onclick="popupCenter({ url: 'thread1404-onclick-event.html', title: 'Popup', w: 350, h: 750 });">

            <strong>NN</strong>

        </a>

        <br />

        <a href="#ort">Ort</a> (Südost)

    </div>

    <script>

        const popupCenter = ({ url, title, w, h }) => {

            const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screenX;

            const dualScreenTop = window.screenTop !== undefined ? window.screenTop : window.screenY;

            const width = window.innerWidth || document.documentElement.clientWidth || screen.width;

            const height = window.innerHeight || document.documentElement.clientHeight || screen.height;

            const systemZoom = width / window.screen.availWidth;

            const left = (width - w) / 2 / systemZoom + dualScreenLeft;

            const top = (height - h) / 2 / systemZoom + dualScreenTop;




            const newWindow = window.open(url, title, `scrollbars=yes, width=${w / systemZoom}, height=${h / systemZoom}, top=${top}, left=${left}`);




            if (window.focus) {

                newWindow.focus();

            }

        };

    </script>

Und in Zukunft benutze bitte Script-Tags beim beim Posten von Code, dann tauchen kein Emojis auf.

Zitat

Mir ist nicht klar was du anders machen möchtest

Ein Mal split um den ganzen Text in Zeilen aufzuspalten.

Dann noch ein Mal um jede Zeile in Felder Fach und Note aufzutrennen.

Wie hier angegeben:

Beitrag

RE: Inhalt einer CSV Datei auslesen

Ich würde das so aufziehen, beachte meine Kommentare:

(Quelltext, 15 Zeilen)

(Ungetestet)

Sempervivum

4. April 2025 um 15:20

Wie schon in deinem anderen Thread geschrieben ist es in diesem Fall eher angebracht, die Zeile mit split aufzuspalten, dann hast Du sofort die beiden Bestandteile.

Aber natürlich kann es nicht schaden, auch die Funktionsweise von slice zu verstehen.

Als erstes musst Du dir darüber im klaren sein, dass die Dinge sich ein wenig unterscheiden, je nachdem ob Du es auf einen String oder ein Array anwendest. Für einen String wird es z. B. hier beschrieben:

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript,…

www.w3schools.com

Auf deinen Fall angewendet: Das erste Feld "Schulfach" bekommst Du mit

schulfach = zeile.splice(0, pos);

Und die Note:

note = zeile.slice(pos + 1);

Wobei davon Gebrauch gemacht wird, dass der Defaultwert für den zweiten Parameter des Ende des Strings ist.

Dann kannst Du den Zweig leer lassen.

Ja, wenn Du mit der Überschrift etwas anderes machen willst, kann Du das so in der Schleife berücksichtigen:

    notenZeilen.forEach((zeile, index) => {
        // forEach liefert nicht nur das aktuelle Element selbst
        // auch seinen Index.
        if(index == 0) {
            // Es handelt sich um die erste Zeile mit der Überschrift.
            // Mach etwas damit oder ignoriere sie.
        } else {
        // Es handelt sich nicht um die Überschrift.
            // Zeile am Semikolon aufsplitten:
            const zeileSplitted=zeile.split(';');
            // Ein Objekt mit Fach und Note an das Ergebnis-Array anhängen:
            notenArray.push({ fach: zeileSplitted[0], note: zeileSplitted[1] });
        }
    });

Ich würde das so aufziehen, beachte meine Kommentare:

// CSV-Text zum Testen bereit stellen:
    const noten = `Fach;Note
Englisch;2
Mathe;4`,
        // In Zeilen aufsplitten::
        notenZeilen = noten.split('\n');
    // Leeres Array für das Ergebnis bereit stellen:
    let notenArray = [];
    // Alle Zeilen durchlaufen:
    notenZeilen.forEach(zeile => {
        // Zeile am Semikolon aufsplitten:
        const zeileSplitted=zeile.split(';');
        // Ein Objekt mit Fach und Note an das Ergebnis-Array anhängen:
        notenArray.push({ fach: zeileSplitted[0], note: zeileSplitted[1] });
    });

(Ungetestet)

So würde es gehen, aber unnötig kompliziert. Spalte die Zeilen ebenfalls mit split in die Felder auf. Und Du willst ja sicher alle Zeilen auswerten, dazu durchläufst Du am besten die Variable Lines mit forEach.