Array, Objekte, Schleife - einzelne Zeile des Arrays ausgeben?

  • Hallo zusammen,


    ich versuche gerade, Javascript zu lernen, aber es fällt mir nicht leicht. Manchmal, so wie jetzt, gerate ich an Grenzen, über die ich mich nicht mehr hinausgoogeln kann.


    Ich habe ein kleines Script geschrieben und in eine HTML-Seite eingebunden:



    Ergebnis sind drei Paragraphen mit den drei Objekten des Arrays, soweit alles gut. Nun würde ich aber gern nur eine einzige Zeile dieser drei Zeilen ausgeben. Hintergrund ist, dass ich später eine Funktion erstellen möchte, mit der man sich durch die einzelnen Fragen klicken kann.


    Es gelingt mir nicht, eine einzige gewünschte Zeile auszugeben. Bin ich mit der Schleife vielleicht auf dem Holzweg? Für Tipps wäre ich dankbar.


    Gruß

    Felix

  • Da muss die Schleife weg.

    Frage eins holst du so

    Code
    questionsAndAnswers[0].question

    Später, wenn du dich da durchklicken willst, musst du die 0 immer ein Erhöhen.

    PS: document.write nutzt man nicht mehr , dafür gibt es innerHTML

  • Vielen Dank, das funktioniert. Ich habe die Schleife zunächst entfernt - fürs Erhöhen werde ich dann aber wohl wieder eine brauchen. Mal sehen, ob ich es hinkriege, ansonsten frage ich hier noch mal.


    Danke auch für den Tipp mit "innerHTML", ich habe mein Dokument angepasst.

  • Ich habe eine weitere Frage. Mein Dokument sieht jetzt so aus:



    Über die Konsole sehe ich alle drei Fragen und Antworten. In meinem div, das per innerHTML befüllt wird, sehe ich nur die letzte der drei Möglichkeiten. Logisch, denn die Schleife zählt alle Vorkommen durch und endet bei 2, die dann an die Variable i übergeben wird.


    Frage: Was muss ich verändern, dass auch das HTML alle drei Fragen in drei Paragraphen im div anzeigt?

  • Die Frage ist leicht zu beantworten: Du weist den Absatz mit einem Gleichheitszeichen dem innerHTML zu, daher wird das, was vorher darin war, einfach überschrieben. Verwende statt dessen ein += dann wird der neue Text dem vorhandenen hinzu gefügt.

  • Und hier bin ich schon wieder ...


    Das Array, das ich in meinem Musterdokument oben ab Zeile 19 aufgeführt habe, ist das ein JSON-Array? Eckige Klammern für das Array, geschweifte Klammern für die Objekte ... ich bin mir wegen der Bezeichnung echt nicht sicher. Wie nennt man es korrekt?

  • Genau genommen versteht man unter JSON einen String, in dem eine Struktur aus Arrays und Objekten definiert wird. Beim Zuweisen einer solchen Struktur an eine Variable spricht man dagegen von literaler Schreibweise. Der Unterschied ist jedoch gering weil die Syntax bei beiden weit gehend gleich ist.

  • Danke Dir! Dank dieser Erläuterung konnte ich korrekt googeln und habe ein Muster gefunden, das dem meinen entspricht:


    https://wiki.selfhtml.org/wiki/JavaScript/Array (fast ganz unten: "Mitarbeiterdatei in kürzerer Literalschreibweise")


    Mein erstes selbstgeschriebenes JavaScript-Script ist nun fertig und spuckt auf Klick die einzelnen Fragen und Antworten aus. Es bereitet richtig Freude, wenn man langsam kapiert, was man da eigentlich macht ...

  • It's me again ...


    Ich hab' in meinem Dokument eine Funktion geschrieben, die beim ersten Klick auf den Button die erste Frage aus meinem Array ausgibt, beim zweiten Klick die erste Antwort. Das klappt durch die Verschachtelung.


    Aber dann müsste der Zähler um 1 erhöht werden, und das klappt nicht - der Zähler wird a) um 2 erhöht und b) wird nur die zweite der beiden verschachtelten Funktionen ausgeführt.



    Jetzt bin ich am Ende meines Lateins. Habe etliche Positionen für "counter++" ausprobiert, aber kein Ergebnis ist brauchbar.


    Ist vielleicht mein gesamter Ansatz falsch? Wie geschrieben, ich möchte beim ersten Klick die erste Frage, beim zweiten Klick die erste Antwort, beim dritten Klick die zweite Frage ... und so weiter. Für eine Idee wäre ich dankbar.

  • Das Problem bei deinem Verfahren ist, dass der Eventlistener jeweils nicht ausgetauscht sondern hinzu gefügt wird. Mit jedem Klick werden es dann immer mehr aktive Eventlistener, so dass der Zähler um 2 erhöht wird und ein Schritt übersprungen.

    Lösung, indem Du nur einen Eventlistener verwendest und eine Statuskennung führst, die Du jeweils zwischen: "zeige Frage" und "zeige Antwort" umschaltest.

  • Wiederum vielen Dank für die superschnelle Antwort!


    Die Statuskennung, von der Du schreibst, ist mir bis dato völlig unbekannt, auch schnelles Googeln brachte erst mal keine Erleuchtung. Ich werde mal in mich gehen, was mir dazu einfallen könnte. Wenn Du aber noch ein wenig erläutern möchtest, lese ich es sehr gern.

  • Einfach eine Variable, ähnlich dem Counter. Z. B. mit den Werten 'zeigeFrage' oder 'zeigeAntwort'. Und dann abfragen:

    Code
    if (status == 'zeigeFrage') {
        // Frage zeigen
        status = 'zeigeAntwort'
    } else {
        // Antwort zeigen
        status = 'zeigeFrage';
    }
  • Ich würde lügen, wenn ich behauptete, ich hätte es verstanden. ;)


    Konkret: Ich habe keine Ahnung, wie ich den Status des Eventhandlers abfragen kann. Man müsste irgendwie auslesen, ob die Zahl der Klicks ungerade (= Frage) oder gerade (= Antwort) ist, oder bin ich da schon wieder auf dem Holzweg?

  • Viel einfacher: Die Variable global definieren und am Anfang auf 'zeigeFrage' setzen:

    let status = 'zeigeFrage';

    Und dann im Callback des Eventhandlers diese Variable abfragen, wie in #13:

    Code
    document.getElementById('clicker').addEventListener('click', () => {
        if (status == 'zeigeFrage') {
            // Frage zeigen
            status = 'zeigeAntwort'
        } else {
            // Antwort zeigen
            status = 'zeigeFrage';
            counter++;
        }    
    });
    Zitat

    Man müsste irgendwie auslesen, ob die Zahl der Klicks ungerade (= Frage) oder gerade (= Antwort) ist, oder bin ich da schon wieder auf dem Holzweg?

    Damit bist Du durchaus nicht auf dem Holzweg, auch auf diese Weise würde es gehen: Durch den Modulo-Operator % kannst Du abfragen, ob der Wert einer Variablen ungerade oder gerade ist:

    Code
    if (nrClicks % 2) {
        // der Wert ist ungerade
    } else {
        // der Wert ist gerade
    }
  • Du bist ja superfix, herzlichen Dank!


    Den Modulo hatte ich vorhin auch schon beim Wickel, aber irgendwie habe ich mich darin verheddert. Ich muss mich mal resetten und neu darüber nachdenken. Gerade Zähler sind für die Fragen zuständig, ungerade für die Antworten. Vielleicht kriege ich es jetzt ja hin ... danke Dir nochmals!


    Ein paar Minuten später: Ich habe Dein Beispiel mit der Statusabfrage eingebaut und es funktioniert hervorragend! Am Kopf kratzend, frage ich mich, warum ich nicht selbst darauf gekommen bin. Es ist ein simpler Umschalter, aber so etwas hatte ich nicht auf dem Schirm.


    Wieder was gelernt heute, das freut mich sehr. Danke, danke, danke! 8)

  • Mittlerweile bin ich eigentlich mit dieser Übung fertig ... eigentlich. Ich habe ein Dokument erstellt, in dem alles prima funktioniert – solange man nicht allzu schnell durch die Fragen klickt.


    Klickt man schneller, als meine ab Zeile 145 eingebundenen Timeouts reagieren können, kommen die Formatierungen durcheinander. Meine Frage: Kann man den Timeouts irgendwie sagen, dass sie nicht starten oder ihre Funktion abbrechen sollen, wenn durch zu schnelles Klicken ihre Bedingungen nicht erfüllt werden?


    Hier das Dokument:


  • Danke Dir für den Tipp! Dass der Code nicht optimal ist, wundert mich nicht – ist meine erste selbstgeschriebene Übung. Daran kann man garantiert noch einiges verbessern.


    Nun aber zu clearTimeout(): Nach meinem Verständnis müsste das durch ein Click-Event ausgelöst werden, also habe ich es so geschrieben:



    Leider, leider hat es keine Auswirkung. Was mache ich falsch?

  • Bei den ganzen Timeouts ist das auch etwas kompliziert.

    Ich spiele gerade auch etwas an dem Code rum und habe nur ein Timeout eingebaut.

    https://basti1012.bplaced.net/…rdner=html-seminar&id=457

    Code auch noch nicht optimal, ich versuche da auch mal den einfachsten und kürzesten Weg zu suchen.

    Du müsstest den cleartimeout bei dir da ein Bauen wo frage 1 wieder beginnt

    z. B.

    Code
    if(counter==0){
    clear alle timer
    }

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!