Beiträge von Sempervivum

PS: Das geht auch ohne jQuery, man kann das unter einem window.onclick zusammen fassen:

        window.onclick = function (event) {
            switch (event.target) {
                case eanmodal:
                    eanmodal.style.display = "none";
                    break;
                case hinweismodal:
                    hinweismodal.style.display = "none";
                    break;
                case listeloeschenmodal:
                    listeloeschenmodal.style.display = 'none';
                    break;
            }
        }

Zitat

Deine Änderungshinweise habe ich auch umgesetzt. eaneingabe.php, film.php, liste.php und filmerstellen.php sind raus geflogen und der Code aus diesen wurde direkt in index.php geschrieben. Außerdem habe ich mir auf deinen Hinweis hin meine anderen Dateien nochmal vorgenommen und auch da einiges raus geschmissen.

Das liest sich ja sehr gut, dann müsste das im Vergleich zum Anfang wesentlich überschaubarer sein.

Ich habe mir dein ursprüngliches Problem mal angesehen und mir ist folgendes aufgefallen: In dem Code deiner index.php finden ich mehrmals dieses:

window.onclick = function(event) {

Dabei wird das onclick jeweils überschrieben, so dass nur das letzte wirksam bleibt. Prüfe, ob das die Ursache für dein Problem ist. Wenn ja, dann konsequent mit Eventbubbling arbeiten, so wie hier:

$(document).on('click', '.entfernenbutton', function() {

Was die Vielzahl an PHP-Dateien betrifft, so hatte ich h3llo hier schon einen Hinweis gegeben, wie man es entscheidend vereinfachen kann:

Klick-Event mehrmals ausgeführt

Unklar, ob er es umgesetzt hat.

Zitat

Ja, ich weiß, was er bewirkt, aber ich weiß nicht, warum. Oder anders gesagt: Ich kann diesen Code nicht mit ganz normalen Sätzen beschreiben.

Ich habe den Code in der Funktion wieder kommentiert, ich hoffe, das trägt zum Verständnis bei:

        function nrToWord(nr) {
            // Eingangsparameter ist die Nummer, die ggf.
            // in ein Wort umgewandelt werden soll.
            // Wir prüfen zunächst ob das Array numberWordMap
            // diese Nummer als Schlüssel und das zugehörige
            // Wort enthält:
            if (numberWordMap[nr]) {
                // Der gesuchte Eintrag, d. h. das Wort,
                // ist im Array vorhanden,
                // wir verlassen die Funktion mit dem
                // Wort als Rückgabewert:
                return numberWordMap[nr];
                // Da wir die Funktion verlassen haben
                // wird der nachfolgende Code nicht ausgeführt.
            }
            // Die Nummer war nicht im Array erhalten, daher 
            // verlassen wir die Funktion mit der unveränderten
            // Nummer als Rückgabewert:
            return nr;
        }

        // Möglicher Weise ist diese Version besser verständlich:
        // Wir stellen zunächst den Rückgabewert in einer Variablen
        // bereit und verlassen die Funktion nur einmal mit diesem
        // Rückgabewert:
        function nrToWord(nr) {
            let returnValue;
            if (numberWordMap[nr]) {
                returnValue = numberWordMap[nr];
            } else {
                returnValue = nr;
            }
            return returnValue;
        }

Zitat von failix

kann mir nur nicht so richtig erklären, was die eckigen Klammern bedeuten.

Das wird z. B. hier erklärt:

https://developer.mozilla.org/de/docs/Web/Ja…l_Objects/Array

Zitat von failix

Kein guter Tag heute für mich. Einer von den Tagen, an denen man sich ganz klein und ahnungslos vorkommt und mächtigen Frust deswegen empfindet.

Einer hat mir mal geraten: "Go slow for the beginning." Es ist ein bewährtes Verfahren, Schritt-für-Schritt vorzugehen und den zweiten Schritt nicht vor dem ersten zu tun. Insofern hat das Vorgehen deines Dozenten schon etwas für sich.

Hallo Failix , dieses:

  if (numberWordMap[nr]) {
    return numberWordMap[nr];
  }

soll den Fall abdecken, den Du in #11 angesprochen hast:

Zitat

Ab 13 soll keine Ersetzung mehr stattfinden. Mein Frage-Antwort-Objekt hat 13 Einträge, die 13 ist aber im Ersetzungsobjekt nicht definiert, also kommt es zum Ausgabefehler "undefined".

Nur wenn ein Eintrag in der Liste mit den Wörtern existiert, wird die Funktion mit dem betr. Wort verlassen, wenn nicht, wird die Zahl zurück gegeben.

Jetzt wo auf dem Tisch liegt, in welchem Zusammenhang sich das Ganze abspielt, kann man es wesentlich vereinfachen, ohne dass es Regexes braucht:

https://jsfiddle.net/Sempervivum/why6deap/1/

Zitat

Ich weiß nicht genau, wie ich in diesem Dropdown einfach Optionen anzeigen

lassen kann, die selektiert und dann mit dem Formular übergeben werden können.

Die Optionen hast Du ja schon. Damit die ausgewählte mit dem Formular übertragen wird, musst Du dem Select ein name-Attribut geben.

Zitat

wie fange ich in meinem Fall diese "3" dann so ab, dass aus "13" nicht "1drei" wird?

In diesem Fall ist die Situation jetzt ein wenig anders: Nur ersetzen wenn keine Zeichen links und rechts sondern die 3 allein steht. Das geht dann so:

'3'.replace(/^3$/g, 'drei')

^ steht dabei für den Anfang und $ für das Ende des Strings.

Zitat

1. Wofür stehen "$1" und "$2" beim Ersetzungsausdruck?

Die werden durch die geklammerten Teilausdrücke in der Regex ersetzt, d. h. diese: ([^\d]) bzw. die Zeichen vor und hinter der 2.

Wenn man diese nicht einbeziehen würde, würden die Zeichen links und rechts von der 2 verschwinden.

2. Hier ('Es sind 3 Fragen.').str.replace(/([^\d])3([^\d])/g, '$1drei$2'); ist das str vor dem replace überflüssig, denn das geklammerte ist ja schon der String, in dem Du ersetzen willst.

3. Dieses questions.length.toString() liefert einen Integer, d. h. einen reinen Zahlenwert. Die Regex prüft jedoch ob links und rechts davon ein Zeichen steht, das keine Ziffer ist und das ist ja bei der Länge bzw. einem Integer nicht der Fall.

Lies mal dieses:

https://wiki.selfhtml.org/wiki/HTML/Tuto…I_referenzieren

Das sollte dir helfen, das Problem zu lösen.

Zitat

Wie macht man es korrekt, dass nur der exakte Ausdruck, in meinem Fall die Ziffer 2 zwischen den Hochkommas, ersetzt wird?

Meinst Du, die 2 soll nur ersetzt werden, wenn sie allein innerhalb von Text ohne Ziffern steht? Dann müsste es so funktionieren:

str.replace(/([^\d])2([^\d])/g, '$1zwei$2')

Die 2 wird nur ersetzt, wenn das Zeichen davor und das Zeichen danach keine Ziffer ist.

Hm, in meinem Browser, Opera, funktioniert es einwandfrei, auch die Zahlen werden fett. Wie hast Du es denn versucht? Das CSS, das ich gepostet habe, hinzu gefügt oder wieder per Inline-Style im HTML?

Ich gebe zu, dass ich nicht genau genug gelesen hatte: Dir geht es um die äußere nummerierte Liste.

Offenbar ist es so, dass sich das Tag <strong> nicht auf die Zahlen auswirkt, wohl aber die CSS-Eigenschaft font-weight. Wenn ich die auf bold setze werden auch die Zahlen fett dargestellt:

        ol li {
            font-weight: bold;
        }

Du bist nicht der erste, der dieses Problem hat:

https://stackoverflow.com/questions/8450…yle-bullet-type

Prüfe, ob Du mit einer der Lösungen dort zum Ziel kommst und melde dich wieder, wenn nicht.

Auf meinem Handy (Samsung A50 mit Samsung-Browser) tritt zwar keine Scrollbar auf, ich kann das Problem aber reproduzieren, indem ich im Desktop-Browser das Fenster schmaler ziehe. Und wenn ich die minimale Breite von 25em im CSS grid-template-columns: repeat(auto-fill, minmax(25em, 1fr)); erhöhe, taucht auch in meinem mobilen Browser die Scrollbar auf.

Der Grund ist offensichtlich, dass die Griditems bei der minimalen Breite und der vertikalen Anordnung nicht mehr in den schmalen Bildschirm des Handy hinein passen, so dass der Browser eine Scrollbar einblendet.

Abhilfe, indem Du mit einer Mediaquery die Breite dynamisch machst: grid-template-columns: 1fr; aber dann kann es passieren, dass deine Inhalte nicht mehr hinein passen. Um das zu beurteilen müsste man wissen wie die realen Inhalte aussehen.

PS: Das mit dem <span> und dem <p> hinter dem Radiobutton kommt mir komisch vor. Prüfe, ob du nicht einfach die Hintergrundfarbe von dem <p> setzen kannst.

Zitat

Richtig wäre es, ein uncheck anzuwenden, aber ich weiß (noch) nicht, wie ich das Element anspreche.

Das checked bei dem Radiobutton wegnehmen kannst Du indem Du die Eigenschaft checked auf false setzt.

        function resetAnswer() {
            var x, z;
            x = document.querySelectorAll('#divAnswers input[type="radio"]');
            for (z = 0; z < x.length; z++) {
                x[z].checked = false;
            }
        }

Wenn Du gleich gezielt den Radiobutton selektierst, der gecheckt ist, brauchst Du gar keine Schleife mehr:

        function resetAnswer() {
            document.querySelector('#divAnswers input[type="radio"]:checked').checked = false;
        }

(beides ungetestet)

Ja, das kannst Du vereinfachen, indem Du die Elemente in einer Schleife bearbeitest:

        // Das folgende in der Funktion buildQuestins
        // diese kann mehrfach aufgerufen werden
        document.getElementById('nrQuestion').innerHTML = i + 1;
        document.getElementById('question').innerHTML = questions[i].question;
        for (let j = 0; j < questions[i].answers.length; j++) {
            document.getElementById('answer' + (j + 1)).innerHTML = questions[i].answers[j];
        }

        // Die Eventlistener brauchen wir jetzt nur noch einmal
        // zu registrieren, da das HTML nicht mehr komplett ausgetauscht wird
        // d. h. außerhalb der Funktion buildQuestions
        for (let j = 0; j < questions[0].answers.length; j++) {
            document.getElementById('answer' + (j + 1)).addEventListener('click', () => {
                if (questions[i].isCorrect[j] === true) {
                    // hier die Aktionen für eine richtige Antwort
                } else {
                    // hier die Aktionen für eine falsche Antwort
                }
            });
        }

Ungetestet.

Jetzt bin ich mir nicht sicher, ob das i von Zeitpunkt der Registrierung gilt oder wenn der Eventlistener feuert. Probiere es aus.

Gern geschehen. Jetzt sieht es schon wesentlich aufgeäumter aus, gut gemacht!