• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Mein script funktioniert nicht

Hanna11

Mitglied
Hallo, ich arbeite an einem Vokabeltrainer und habe nun verschiedenen Lektionen. Bis jetzt funktioniert auch alles sehr gut. Nur bei einer Lektion wird man, wenn man alle Vokabeln richtig beantwortet hat nicht zurück geleitet manchmal wird dann auch keine neue Vokabel angezeigt, sondern es steht dort einfach nur undefined. Ich hoffe jemand kann mir helfen. Meine Code:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="Stylecodes/design4.css">
  <link rel="stylesheet" href="Stylecodes/Main.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lektion 4</title>
    <script src="jquery-1.10.2.min.js"></script>

</head>
<body>
    <div id="float2">
<div class="kasten2">Falsch beantwortete Vokabeln:<p id="wrong"></p> Wiederhole diese öfter!</div></div>
<div class="kasten"> Richtig beantwortete Vokabeln:<p id ="demo"></p> Restliche Vokabeln: <span id="rechnen"></span> </div>
    
      
  

 
</div>

<div id="website">
  <h1 style="text-align: center; color:indianred; text-decoration: underline;">Lektion 4: Zeit</h1>


  <div class="center">
  <span id="abstand"> <input  type="text" id="vokabel"></span>
    <input type="text" placeholder="Lösung" id="loesung" autofocus> <select id="sonderzeichen">
        <option></option>
        <option>đ</option>
        <option>ć</option>
        <option>ž</option>
        <option>č</option>
        <option>š</option>
    </select>
   <div class="frame"> <button class="custom-btn btn-2" id="pruefen" onclick=Pruefen();>Überprüfen</button> </div>
    
    </div>
        <script>
var richtigeVokabeln, text;
var index;
var rechnung;
var erg;
var erg2;
        var vokablen = ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag", "Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember", "Frühling", "Sommer", "Herbst", "Winter", "Heute", "Morgen", "Gestern", "Jeden Tag", "Jetzt", "Frohe Weihnachten", "Frohe Ostern", "Frohes neues Jahr", "Mittag", "Nachmittag", "Mitternacht", "Stunde", "Minute", "Sekunde", "Uhr", "2 Uhr", "7 Uhr", "10:30 Uhr", "15 Uhr", "Vorgestern", "Übermorgen"];
        var vokablen2 = ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag", "Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember", "Frühling", "Sommer", "Herbst", "Winter", "Heute", "Morgen", "Gestern", "Jeden Tag", "Jetzt", "Frohe Weihnachten", "Frohe Ostern", "Frohes neues Jahr", "Mittag", "Nachmittag", "Mitternacht", "Stunde", "Minute", "Sekunde", "Uhr", "2 Uhr", "7 Uhr", "10:30 Uhr", "15 Uhr", "Vorgestern", "Übermorgen"];
        var uebersetzung = ["ponedjeljak", "utorak", "srijeda", "četrvrtak", "petak", "subota", "nedjelja", "siječanj", "veljača", "ožujak", "travanj", "svibanj", "lipanj", "srpanj", "kolovoz", "rujan", "listopad", "studeni", "prosianc", "proljeće", "ljeto", "jesen", "zima", "danas", "sutra", "jučer", "svaki dan", "sada", "sretan božić", "sretan uskrs", "sretna nova godina", "podne", "poslijepodne", "ponoć", "sat", "minuta", "sekunda", "sat", "dva sat", "sedam sati ujutro", "deset sati i trideset minuta", "tri sata popodne/petnaest sati", "prekjučer", "prekosutra"];
        richtigeVokabeln = [ ];
        falscheVokabeln =  [ ];
        richtigeAntwort = 0;
        var wiederholung;
        var status ='neu' //das dann au

        
        const input2 = document.getElementById("loesung");
        const select = document.getElementById("sonderzeichen");
       select.addEventListener("change", function (event) {
            const zeichen = this.value;
            input2.value += zeichen;
            this.selectedIndex = 0;
            document.getElementById("loesung").focus();
        });
 

        var input = document.getElementById("loesung");
   input.addEventListener("keyup", function(event) {
       if (event.keyCode === 13) {
           event.preventDefault();
           document.getElementById("pruefen").click();
       }
    });

      
        var input = document.getElementById("loesung");
        document.getElementById('pruefen').addEventListener("click", pruefen);     
      
        function pruefen() {
            if(status == 'wiederholung'){
                
                neueVokabel();
                status = 'neu';
                input.style.color ='black';
            } else {
            // Pruefen ob die Uebersetzung richtig ist
            if (document.getElementById("loesung").value == uebersetzung[index]) {
                // Anzahl der richtigen Antworten erhoehen
                richtigeAntwort++;
                // Rueckmeldung an den Benutzer
                alert("Richtig! Du hast " + richtigeAntwort + " Vokabeln richtig beantwortet!");
                
                 erg=richtigeVokabeln.includes(uebersetzung[index]);

                if(erg == false){
                richtigeVokabeln.push(uebersetzung[index]);}
                

              
                vokablen.splice(index, 1);
               alert(vokablen);
                uebersetzung.splice(index, 1);             
                        if (richtigeAntwort == 10) {
                    alert("Super! Du hast 10 Vokabeln richtig geschrieben! Mach eine Pause");
                    
                    text = "<ul>";
                    richtigeVokabeln.forEach(myFunction);
                    text += "</ul>";
                    document.getElementById("demo").innerHTML = text;
                    function myFunction(value) {
                    text += "<li>" + value + "</li>"; }

                    rechnung= vokablen2.length - richtigeVokabeln.length;
                    document.getElementById("rechnen").innerHTML = rechnung;

                    text = "<ul>";
                    falscheVokabeln.forEach(myFunction);
                    text += "</ul>";
                    document.getElementById("wrong").innerHTML = text;
                    function myFunction(value) {
                    text += "<li>" + value + "</li>"; }

                   neueVokabel();

                } else {
                    // Neue Vokabel vorlegen
                    neueVokabel();
                }           
                 else {
                    // Neue Vokabel vorlegen
                    neueVokabel();
                }
                if (richtigeVokabeln.length == vokablen2.length){
                  alert("Sehr gut! Du hast alle Vokabeln richtig beantwortet. Du kehrst jetzt zurück zum Hauptmenü. Komm einfach wieder, um weiter zu lernen");

            
                    
                  window.location.href = "Hauptmenü.html";
                }
            } else {
                // Falsche Uebersetzung: Rueckmeldung an Benutzer
                alert("Falsch :( Die Lösung ist: " + uebersetzung[index]);
                 alert("Gebe " + uebersetzung[index] + " nochmal ein, um die Vokabel zu verinnerlichen"); //war ursprünglich ein prompt
                vokablen.push(vokablen[index]);
                status = 'wiederholung'; // das auch weglassen
                input.focus(); //das auch
                input.style.color='firebrick';
                uebersetzung.push(uebersetzung[index]);
                erg2=falscheVokabeln.includes(uebersetzung[index]);
                
                if(erg2 == false){
                falscheVokabeln.push(uebersetzung[index]);}

              
                // Neue Vokabel vorlegen
               // neueVokabel(); das wurde geändert kommentar wegmachen
                
            }
        }}
      
        function neueVokabel() {
            index = Math.floor(Math.random() * vokablen.length);
            document.getElementById("vokabel").value = vokablen[index];
            document.getElementById("loesung").focus();
            // Alte Uebersetzung kann jetzt geloescht werden
            input.value = '';
        }
        // Die erste Vokabel vorlegen
        neueVokabel();

</script>



</body>
</html>
 
Werbung:
Oh, das ist wahrscheinlich deswegen passiert, weil ich den Code gekürzt habe. In meinem eigentlich Code ist das nicht der Fall
 
Werbung:
Ja, ich musste allerding was kürzen, da ansonsten es hier nicht ins Forum reinpasst. Hier ist es ja begrenzt. Mein vollständiger Code: https://pastebin.com/PCdAnQQv (Dieser Code enthält auch den Musik Player, wofür ich den jQuery benutzt habe)
Ich habe es auch mal mit nur wenigern Vokabeln laufen lassen und dort hat es dann funktioniert. Mit dieser Anzahl von Vokabeln ist aber so, dass es reibungslos verläuft bis zur letzen Vokabel, die wird als undefined wiedergegeben und man kann nicht alle Vokabeln lösen und man wird auch nicht zum Hauptmenü geleitet.
 
Die Konsole liefert mir nichts weiteres. Sie erwähnt zwar das mit dem Prüfen, aber wenn ich das anpassen. Dann spinnt alles.
 
Außerdem kann es eigentlich gar nicht von der Anzahl der Vokabeln abhängen, da ich eine Lektion mit mehr Vokablen habe und da funktioniert alles reibungslos und es ist derselbe Code nur mit unterschiedlichen Vokabeln im array
 
Werbung:
Dann nehme doch diese Lektion und passe dann die Vokabeln an :rolleyes:
 
Die Konsole liefert mir nichts weiteres. Sie erwähnt zwar das mit dem Prüfen, aber wenn ich das anpassen. Dann spinnt alles.
Wenn du das löschst,
HTML:
 onclick=Pruefen();
sollte das den Code nicht stören, da deine function pruefen klein geschrieben ist und wie in #8 beschrieben über den EventListener aufgerufen wird.
Deswegen sollte das onclick ohne Hindernisse gelöscht werden können.

Den Code könntest du aber auch noch kürzer halten.
Ab 181 und bis 327 hast du eine immer wieder kehrende If Abfrage
Javascript:
if (richtigeAntwort == 20) {
          alert("Super! Du hast 20 Vokabeln richtig geschrieben! Mach eine Pause");
  ......
Da sich da nur die Zahl ändert ,kannst du über 100 Zeilen sparen.
Zb so
Javascript:
if(richtigeAntwort%20==0){
          alert("Super! Du hast "+richtigeAntwort+" Vokabeln richtig geschrieben! Mach eine Pause");
.......

Da du ca 7 mal den if else zweig hast wird auch 7 mal
neueVokabel();
aufgerufen.Das sollte auch nicht sinn der sache sein.

EDIT: In den if Abschnitt hast du 2 mal
Code:
function myFunction(value)
stehen.Wie weit das erlaubt ist weiß ich nicht.
Da die function den gleichen Inhalt dürfte das nicht stören , doch es dürfte auch mit einer funktion laufen.
 
Zuletzt bearbeitet:
Vielen Dank für die vielen Verbesserungsvorschlägt. Mich selber haben die vielen if-Abfrage und Zeilen gestört, aber keine schönere Lösung auf Anhieb gefunden. Deswegen werde ich mir die Lösung von @basti1012 mal anschauen.
Und nun zu dem Fehler im Code. Ist also eigentlich das Problem, dass es 2 Vokabeln gibt, die gleich sind. @Sempervivum und das was du geschickt hast, wäre die Lösung dafür, dass obwohl es 2 gleiche Vokabel gibt kein Fehler auftreten wird
 
Werbung:
@Sempervivum Meinst du dass ich das Script einfach in eine js-Datei schreibe und die dann in html einbinden. Kann ich das auch wie bei CSS einfach beim head-Bereich machen, weil bei dem Link was du geschickt hast, haben die es im body gemacht
 
Alles gut, das hätte ich auch nicht gewollt. Habe es jetzt geteset mit denn 44 Vokabeln aber ohne das doppelte sat und es hat funktioniert. Also muss das das Problem sein. Danke, ich werde jetzt noch deinen Lösungsvorschlag testen. Wieder einmal hast du mir mein Leben gerettet:smile:
 
Werbung:
Zurück
Oben