Variable über Reload hinweg gültig

Wan · 6. Juli 2020

Hallo Ihr lieben,

ich hoffe Ihr könnt mir helfen.

Für die Übung und um zwei Hobbys zu verbinden, versuche ich einen eigenen Vokabeltrainer für Deutsch-Spanisch zu schreiben.

Soweit funktioniert mein Test bisher auch, jedoch möchte ich noch einen Zähler einbauen, der die korrekten und falschen Antworten mit zählt und anzeigt.

Genau hier stoße ich aber an meine Grenzen, dadurch dass die Seite nach jeder bestätigten Vokabel neu lädt, wird mir der Wert meiner Variable "richtig" immer wieder auf den Ursprung zurück gesetzt. Ich habe es bisher noch nicht herausgefunden, wie ich das umgehen kann. Auch mit session.Storrage habe ich es versucht, dann springt der Zähler auf 1 aber nicht weiter. Vielleicht kann mir von euch ja einer den entscheidenden klapps auf den Hinterkopf geben.

Vielen Dank an euch.

Viele Grüße

Wan

Hier mein Code HTML + JS bisher:

Code

<!DOCTYPE html>
<head>
    <title>Spanisch Vokalbeltrainer</title>
    <meta charset="utf-8">
    <meta lang="de">
    <link type="text/css" rel="stylesheet" href="">
</head>
<body>
    <h1>Spanisch Vokabeltrainer</h1>

    <p>Vokabel:</p>
    <!-- Hier wird die deutsche Vokabel eingefügt -->
    <p id="vokabel"></p>

    <p>Übersetzung:</p>
    <!-- Hier gibt der User die Übersetzung ein -->
    <form>
        <input type="text" id="uebersetzung">
        <button type="submit" onclick="auswerten()">Absenden</button>
    </form>

    <script>

        var richtig = 0;
        var falsch = 0;

        //Array mit den deutschen Wörtern
        var deutsche_woerter = ["Hallo", "Tschüss", "Freund"];
        //Array mit den spanischen Wörtern
        var spanische_woerter = ["Hola", "Adios", "Amigo"];

        //Für eine zufällige Auswahl an Vokabeln
        var rand = deutsche_woerter[Math.floor(Math.random() * deutsche_woerter.length)];
        console.log("Vokabel: "+rand);
        //Um die Indexnummer der zufälligen Auswahl zu erfahren
        var number = deutsche_woerter.indexOf(rand);
        console.log("Indexnummer der Vokabel: "+number);
        
        //die deutsche Vokabel einfügen
        document.getElementById("vokabel").innerHTML = (rand);

        function auswerten() {
            //abfangen der Eingabe des Users
            user_uebersetzung = document.getElementById("uebersetzung").value;

            //Prüfen ob die Übersetzung des Users dem Spanischen Wort im spanische_woerter Array entspricht
            //da wir mit der Variable number wissen, welcher Index des deutschen_woerter Arrays angezeigt wird
            //muss im Array spanische_woerter der Index natürlich der selbe sein, da deutsche und spanische vokabeln
            //in beiden Arrays an der selben stelle stehen.
            //Wird also aus der deutschen Liste der erste Wert angezeigt, so muss in der spanischen Liste auch das
            //erste Wort als korrekte übersetzung stimmen.
            if (user_uebersetzung == spanische_woerter[number]) {
                alert("Super!")   
                richtig++;           
            }
            else if (user_uebersetzung == "") {
                alert("Es wurde kein Text eingegeben!")
            }
            else {
                alert("Leider Falsch...")
                falsch++;
            }
        }
        console.log("Richtig: "+richtig)
        console.log("Falsch: "+falsch)
        
    </script>


</body>
</html>

Alles anzeigen

Sempervivum · 6. Juli 2020

An sich wäre sessionStorage schon der richtige Weg, um eine Variable über ein Neuladen hinweg zu speichern. Allerdings bin ich der Meinung, dass Du hier gar kein Formular brauchst, so dass sich das Problem mit dem Speichern erübrigt. Lasse die form-Tags web und gib dem Button ein type="button", dann erwarte ich, dass es funktioniert.

Wan · 6. Juli 2020

Hallo Sempervivum,

vielen Dank für deine Antwort.

Wenn ich das Formular wegnehme, habe ich jedoch das Problem, dass die nächste Vokabel nicht geladen wird.

Damit bekomme ich zwar beim ersten Aufruf der Seite eine Vokabel angezeigt, aber nach einem Klick auf den Button erscheint keine Zufällige neue Vokabel. Es bleibt dann immer die eine stehen, denn beim Reload der Seite wird eine zufällige Variable aus dem Array gepickt und ins DOM eingefügt.

Aber gut, wenn du meinst, dass ich mit sessionStorage schon auf dem richtigen Weg bin, dann spiele ich mich da noch etwas herum.

Irgendwie muss ich es ja dann hinbekommen.

Viele Grüße

Wan

Wan · 6. Juli 2020

Danke nochmals für den Hinweis das sessionStorage eigentlich der richtige Weg ist, ich habe es nun geschafft, dass alles so funktioniert wie gewünscht. Falls es jemanden noch interessiert, hier der Code:

Code

<!DOCTYPE html>
<head>
    <title>Spanisch Vokalbeltrainer</title>
    <meta charset="utf-8">
    <meta lang="de">
    <link type="text/css" rel="stylesheet" href="">
</head>
<body>
    <h1>Spanisch Vokabeltrainer</h1>

    <p>Vokabel:</p>
    <!-- Hier wird die deutsche Vokabel eingefügt -->
    <p id="vokabel"></p>

    <p>Übersetzung:</p>
    <!-- Hier gibt der User die Übersetzung ein -->
    <form>
        <input type="text" id="uebersetzung">
        <button type="submit" onclick="auswerten()">Absenden</button>
    </form>

    <script>
        //Variablen um die Zähler für die richtigen/falschen Übungen über den Reload hinweg im Session-Storrage zu speichern
        richtig = sessionStorage.getItem('richtig');
        falsch = sessionStorage.getItem('falsch');

        //Array mit den deutschen Wörtern
        var deutsche_woerter = ["Hallo", "Tschüss", "Freund"];
        //Array mit den spanischen Wörtern
        var spanische_woerter = ["Hola", "Adios", "Amigo"];

        //Für eine zufällige Auswahl an Vokabeln
        var rand = deutsche_woerter[Math.floor(Math.random() * deutsche_woerter.length)];
        console.log("Vokabel: "+rand);
        //Um die Indexnummer der zufälligen Auswahl zu erfahren
        var number = deutsche_woerter.indexOf(rand);
        console.log("Indexnummer der Vokabel: "+number);
        
        //die deutsche Vokabel einfügen
        document.getElementById("vokabel").innerHTML = (rand);

        function auswerten() {
            //abfangen der Eingabe des Users
            user_uebersetzung = document.getElementById("uebersetzung").value;

            //Prüfen ob die Übersetzung des Users dem Spanischen Wort im spanische_woerter Array entspricht
            //da wir mit der Variable number wissen, welcher Index des deutschen_woerter Arrays angezeigt wird
            //muss im Array spanische_woerter der Index natürlich der selbe sein, da deutsche und spanische vokabeln
            //in beiden Arrays an der selben stelle stehen.
            //Wird also aus der deutschen Liste der erste Wert angezeigt, so muss in der spanischen Liste auch das
            //erste Wort als korrekte übersetzung stimmen.
            if (user_uebersetzung == spanische_woerter[number]) {
                alert("Super!");
                //die Variable richtig wird um 1 erhöht   
                richtig++;
                //und dann wieder im Session-Storage gespeichert
                sessionStorage.setItem('richtig', richtig);
                   
            }
            else if (user_uebersetzung == "") {
                alert("Es wurde kein Text eingegeben!")
            }
            else {
                alert("Leider Falsch...")
                //die Variable richtig wird um 1 erhöht   
                falsch++;
                //und dann wieder im Session-Storage gespeichert
                sessionStorage.setItem('falsch', falsch);
            }
        }
        console.log("Richtig: "+sessionStorage.getItem("richtig"))
        console.log("Falsch: "+sessionStorage.getItem("falsch"))
    </script>


</body>
</html>

Alles anzeigen

Sempervivum · 6. Juli 2020

Zitat

Wenn ich das Formular wegnehme, habe ich jedoch das Problem, dass die nächste Vokabel nicht geladen wird.

Damit bekomme ich zwar beim ersten Aufruf der Seite eine Vokabel angezeigt, aber nach einem Klick auf den Button erscheint keine Zufällige neue Vokabel. Es bleibt dann immer die eine stehen, denn beim Reload der Seite wird eine zufällige Variable aus dem Array gepickt und ins DOM eingefügt.

Das wäre auch lösbar gewesen: Einfach eine Funktion, z. B. zeigeVokabel, definieren, die die Vokabel ermittelt und dem Benutzer zeigt, und diese sowohl beim Laden der Seite als auch in der Funktion auswerten aufrufen.

Aber super, dass du eine Lösung gefunden hast!

Variable über Reload hinweg gültig

Jetzt mitmachen!

Teilen