Beiträge von Sempervivum

    Javascript beachtet Groß- und Kleinschreibung. getElementsByID musst Du so schreiben: getElementById.

    Wenn der erste Text gleich offen sein soll, brauchst Du dem betr. Element nur die Klasse "active" zu geben.

    Oder möchtest Du, dass er immer offen bleibt?

    Wenn man das vorige Element schließen will, wird es leider ein wenig komplizierter. Ich habe das folgende Javascript kommentiert, damit Du verstehst, was sich abspielt:

    Zitat

    Wie genau kann ich denn den vorherig angeklickten Button mit diesem Code ansprechen?

    Das kannst Du, indem Du querySelector verwendest und die Klasse "active" angibst:

    const contentActive = document.querySelector('.flexbox-content.active');

    Da gibt es jetzt zwei Probleme:

    1. Im HTML und CSS verwendest Du für die Buttons die Klasse "flexbox-button2", im Javascript jedoch "flexbox-button", d. h. Du musst das Javascript so ändern:

    Code
    1. <script>
    2. const buttons = document.getElementsByClassName('flexbox-button2'),
    3. contents = document.getElementsByClassName('flexbox-content');
    4. for (let i = 0; i < buttons.length; i++) {
    5. buttons[i].addEventListener('click', function () {
    6. contents[i].classList.toggle('active')
    7. });
    8. }
    9. </script>

    Und im CSS musst Du die den Content zunächst unsichtbar machen, indem Du die Höhe auf 0 setzt:

    Code
    1. /* Content zunächst unsichtbar machen: */
    2. .flexbox-content .flexbox-text {
    3. height: 0;
    4. overflow: hidden;
    5. }
    6. /* Ist die Klasse "active" gesetzt, den Content sichtbar machen: */
    7. .flexbox-content.active .flexbox-text {
    8. height: 100%;
    9. }

    Danke, so wird das Ganze klar. Ohne es ein wenig umzuorganisieren, wird sich dein gewünschtes Layout wohl nicht realisieren lassen. Also links ein Container mit den Buttons und rechts einer mit den Inhalten. Und dann muss man eine Beziehung zwischen den Buttons links und den Inhalten rechts herstellen. Ich dachte zunächst daran, das mit einem data-Attribut bei den Buttons zu machen, aber mit diesem HTML und Javascript dürfte das gar nicht notwendig sein:

    (ungetestet)

    Das HTML musst Du selber noch vervollständigen.

    Leider kann ich aus dem HTML und CSS nicht erkennen, wie dieses Accordion funktioniert. Weder finde ich Check- oder Radiobuttons noch ein Javascript, das es macht. Irgend wie mit diesem kit.fontawesome? Oder der CSS-Datei, die Du einbindest? Kannst Du das erklären?

    Zitat

    ob ich mithilfe des Netzwerk-Tabs dieses Umlautproblem hätte feststellen können.

    ...

    Hätte ich daraus auf die Umlaute schließen können bzw. müssen?

    Wohl kaum, denn dort ist die Response vollkommen leer. Begegnet mir zum ersten Mal, dass ein Problem mit dem Zeichensatz zum Totalversagen führt, sonst immer nur Schmierzeichen.

    Zitat

    Zu Deinem Code in #78: Ist das nicht der alte Code, den ich ursprünglich mal verwendet habe und sind die oberen Zeilen, mit denen eine ID abgefragt wird, jetzt nicht überflüssig? Das fetch hatte ich dort in einer Schleife: while ($row = $statement->fetch()) ..., wo und wie ich es in den aktuellen Code einsetzen müsste, weiß ich nicht.

    Eine Schleife ist genau genommen überflüssig, weil Du ja in deinem Fall den Datensatz für genau eine ID aus der Datenbank liest und dabei kann nur eine Zeile im Ergebnis sein. D. h. dies dürfte den Zweck erfüllen:

    Von den ersten Zeilen ist dieses:

    $id = $_POST['id'];

    erforderlich, weil wir ja die ID für die DB-Abfrage brauchen. Die Fehlerbehandlung könnte man noch ausgefeilter machen, aber jetzt weißt Du ja, dass man die Ausgabe des Skripts im Netzwerk-Tab sehen kann und für das Debugging dürfte das genügen.


    Zitat

    Und eines frage ich mich auch noch: Ich kann derzeit lokal einen JSON-String in eine PHP-Datei laden, der von JavaScript weiterverarbeitet wird. Aber war nicht das eigentliche Ziel, die Inhalte des Quiz' nicht lokal abzulegen und immer nur die benötigten Teile aus der DB abzufragen? Irgendwie habe ich das immer noch nicht wirklich verstanden ...

    Das fett formatierte ist genau der Kern der Sache und wir sind ja gerade dabei, das aufzubauen.

    Dieses verstehe ich nicht: "Ich kann derzeit lokal einen JSON-String in eine PHP-Datei laden", jedenfalls wenn Du damit meinst, einen JSON-String aus einer Datei zu laden.

    Auch mit PDO ist die Ausgabe in JSON kein Problem:

    Dann hast Du das Array genau in dem Format, wie es vorher in dem Javascript-Quiz war.


    Edit: Das fetch vergessen, Du kannst es sicher hinzu fügen.

    PS: Ich habe einen kurzen Blick auf dein früheres Skript mit dem Quiz geworfen und dieses z. B. könntest Du gut wieder verwenden:

    Code
    1. function buildQuestions() {
    2. document.getElementById('nrQuestion').innerHTML = i + 1;
    3. document.getElementById('question').innerHTML = questions[i].question;
    4. for (let j = 0; j < questions[i].answers.length; j++) {
    5. document.getElementById('answer' + (j + 1)).innerHTML = questions[i].answers[j];
    6. }
    7. answerRight.style.display = 'none';
    8. end.style.display = 'none';
    9. }
    Zitat

    In den DevTools (Chrome/Windows) unter "Network" kann ich meine Frage 1 sehen.

    Das ist schon Mal sehr gut.

    Zitat

    Die Konsole meldet allerdings "Uncaught (in promise) SyntaxError: Unexpected token F in JSON at position 2". Und dieses "F" ist das "F" des Wortes "Frage" in meinem PHP-Code.

    Das liegt daran, dass das Skript JSON erwartet. Diese Zeile:

    return res.json();

    dekodiert den Text vom Server als JSON. Deine Ausgabe ist jedoch kein JSON, daher der Fehler.


    Jetzt gibt es eine grundsätzliche Entscheidung zwischen zwei Wegen, die Du einschlagen kannst:

    1. Das PHP-Skript das HTML generieren lassen, das der Browser direkt anzeigen kann. So ist es jetzt.
    2. Das PHP-Skript ein Array mit den Daten generieren lassen und dieses im JSON-Format an den Client bzw. den Browser übertragen. Das sieht auf den ersten Blick komplizierter aus, könnte dir aber unterm Strich Arbeit ersparen, weil dein früheres Skript die Daten auch aus einem Array gezogen hat und daraus das HTML generiert. Und möglicher Weise könntest Du diesen Code teilweise wieder verwenden.

    Um das mit #69 konkret zu machen: Da Du jetzt den POST-Parameter 'id' ausliest, musst Du ihn mit dem selben Namen an den Server schicken:

    Code
    1. const params = new FormData();
    2. params.append('id', '1');

    Das Ganze ist ein wenig undurchsichtig, weil man von der Serverantwort zunächst nichts zu sehen bekommt. Da ist jedoch das Network-Tab Gold wert, weil man sich dort sofort die Antwort ansehen kann, egal was im Browser alles fehl schlägt.