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

  • 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?

  • 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?

  • 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.

  • 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
    1. document.getElementById('clicker').addEventListener('click', () => {
    2. if (status == 'zeigeFrage') {
    3. // Frage zeigen
    4. status = 'zeigeAntwort'
    5. } else {
    6. // Antwort zeigen
    7. status = 'zeigeFrage';
    8. counter++;
    9. }
    10. });
    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
    1. if (nrClicks % 2) {
    2. // der Wert ist ungerade
    3. } else {
    4. // der Wert ist gerade
    5. }
  • 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?