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

Array-Elemente löschen

H

Hanna11

Mitglied
Hallo, ich habe ein Frage: Wie kann man Array-Elemente aus einem Array löschen. Ich habe schon ein paar Artikel durchgelesen, aber entweder kann man nur das erste Element löschen/das letzte oder ein bestimmtes Element. Außerdem wird dann oft undefined ausgegeben.
Ich habe einen Vokabeltrainer programmiert und in den Arrays die Vokabeln und die Übersetzungen gespeichert. Ich möchte jetzt, dass die Vokabel, die richtig geschrieben wurden ist, dann aus dem Array entfernt wird.
Das war mein Versuch:
Code: 
  var vokablen = ["schwarz", "Gelb", "Braun", "schwarz", "Gelb", "Braun"];
        var vokablen2 = ["schwarz", "Gelb", "Braun"];
        var uebersetzung = ["Crna", "žuta", "Smeđe", "Crna", "žuta", "Smeđe"];
        richtigeVokabeln = [ ];
        falscheVokabeln =  [ ];
        richtigeAntwort = 0;
        var wiederholung;

        
        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);
        

        // In dieser Form machte die Schleife keinen Sinn: Die Endebedingung (richtigeAntwort == 3)
        // ist nie erfuellt, da die Variable richtigeAntwort den Wert 0 hat
        // Daher wird die Schleife genau einmal durchlaufen
        // do {

        // Diese Funktion prueft ob die Uebersetzung richtig eingegeben wurde
        // und legt ggf. eine neue Vokabel vor
        function pruefen() {
            // 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 + " richtig beantwortet!");
             --->   vokablen.splice(vokablen[index]);
                alert(vokablen)
                erg=richtigeVokabeln.includes(uebersetzung[index]);
                
                if(erg == false){
                richtigeVokabeln.push(uebersetzung[index]);}
Bis ich dann rausgefunden habe, dass splice nicht so funktioniert. Hat jemand einen Vorschlag, wie man das anders lösen könnte. Vielen Dank im Voraus!
 
Ja, ich habe das schon ausprobiert. Es werden dann die Arrays gelöscht, jedoch verschiebt sich dann alles irgendwie. Manchmal wird dann immer noch undefined ausgegeben und manchmal stimmen dann die Übersetzungen nicht überein. Und man wird auch nicht zum Haupmenü zurückgeleitet.
Hier ist mein vollständiger Code (ein bisschen gekürzt):
Code: 
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="Stylecodes/designvoc.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 1</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 id="float">
    
<ul class="navigation">
    <li> <a href="Startseite.html" target="_blank">Startseite</a></li>
    <li> <a href="Hauptmenü.html"target="_blank"> Hauptmenü </a></li>
    <li><a href="#" target="_blank">Vokabelliste</a></li>
    <li><a href="Lektion 2.html" > Lektion 2</a></li>
        </ul>

<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 1: Grundwortschatz</h1>

 

<span class="flex"><img src="bilder/germany200.jpg" alt="Deutschlandflagge" > </span>
<span ide="bild2"><img src="bilder/croatia.jpg" alt="Kroatienflagge" width="200px" style="margin-top: 110px; height:120px;"> </span>
  <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>


    <div id="main">
        <div id="image">
            <img src="hands.jpg"/>
        </div>
        <div id="player">
            <div id="songTitle">Control</div>
            <div id="buttons">
                <button id="pre" onclick="pre()"><img src="Pre.png" height="90%" width="90%"/></button>
                <button id="play" onclick="playOrPauseSong() "><img src="Play.png"/></button>
                <button id="next" onclick="next()"><img src="Next.png" height="90%" width="90%"/></button>
            </div>
            
            <div id="seek-bar">
                <div id="fill"></div>
                <div id="handle"></div>
            </div>

<div id="currentTime">00:00 / 00:00</div>

        </div>
    </div>



        <script>
var richtigeVokabeln, text;
var index;
var rechnung;
var erg;
var erg2;
        var vokablen = ["Hallo", "Tschüss", "Guten Morgen"];
        var vokablen2 = ["Hallo", "Tschüss", "Guten Morgen");
        var uebersetzung = ["bok", "doviđenja",  "dobro jutro"];
        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);
        

        // In dieser Form machte die Schleife keinen Sinn: Die Endebedingung (richtigeAntwort == 3)
        // ist nie erfuellt, da die Variable richtigeAntwort den Wert 0 hat
        // Daher wird die Schleife genau einmal durchlaufen
        // do {

        // Diese Funktion prueft ob die Uebersetzung richtig eingegeben wurde
        // und legt ggf. eine neue Vokabel vor
        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!");
                vokablen.splice(index, 1);
                alert(vokablen);
                
                
                erg=richtigeVokabeln.includes(uebersetzung[index]);
                
                if(erg == false){
                richtigeVokabeln.push(uebersetzung[index]);}
                
                // Ist die geforderte Anzahl von richtigen Antworten erreicht
                // geben wir nur eine Rueckmeldung und legen keine neue Vokabel vor
                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
                
            }
        }}
        // } while (richtigeAntwort == 3)
        // Diese Funktion legt dem Benutzer eine neue Vokabel vor
        // Der Code wird mehrfach benoetigt, daher in einer Funktion
        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>


Ich habe dann noch versucht auch die Entsprechende Übersetzung zu entfernen mit uebersetzung.splice(index, 1); Das hat aber au nicht funktioniert
 
Okay, warte ich glaub ich habe es. Ich habe nun doch uebersetzung.splice(index, 1); verwendet und jetzt hat es dann doch funktioniert. Kannst du nochmal drüberschauen?
Mein Code jetzt:
Code: 
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="Stylecodes/designvoc.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 1</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 id="float">
    
<ul class="navigation">
    <li> <a href="Startseite.html" target="_blank">Startseite</a></li>
    <li> <a href="Hauptmenü.html"target="_blank"> Hauptmenü </a></li>
    <li><a href="#" target="_blank">Vokabelliste</a></li>
    <li><a href="Lektion 2.html" > Lektion 2</a></li>
        </ul>

<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 1: Grundwortschatz</h1>

 

<span class="flex"><img src="bilder/germany200.jpg" alt="Deutschlandflagge" > </span>
<span ide="bild2"><img src="bilder/croatia.jpg" alt="Kroatienflagge" width="200px" style="margin-top: 110px; height:120px;"> </span>
  <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>


    <div id="main">
        <div id="image">
            <img src="hands.jpg"/>
        </div>
        <div id="player">
            <div id="songTitle">Control</div>
            <div id="buttons">
                <button id="pre" onclick="pre()"><img src="Pre.png" height="90%" width="90%"/></button>
                <button id="play" onclick="playOrPauseSong() "><img src="Play.png"/></button>
                <button id="next" onclick="next()"><img src="Next.png" height="90%" width="90%"/></button>
            </div>
            
            <div id="seek-bar">
                <div id="fill"></div>
                <div id="handle"></div>
            </div>

<div id="currentTime">00:00 / 00:00</div>

        </div>
    </div>



        <script>
var richtigeVokabeln, text;
var index;
var rechnung;
var erg;
var erg2;
        var vokablen = ["Hallo", "Tschüss", "Guten Morgen"];
        var vokablen2 = ["Hallo", "Tschüss", "Guten Morgen"];
        var uebersetzung = ["bok", "doviđenja",  "dobro jutro"];
        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);
        

        // In dieser Form machte die Schleife keinen Sinn: Die Endebedingung (richtigeAntwort == 3)
        // ist nie erfuellt, da die Variable richtigeAntwort den Wert 0 hat
        // Daher wird die Schleife genau einmal durchlaufen
        // do {

        // Diese Funktion prueft ob die Uebersetzung richtig eingegeben wurde
        // und legt ggf. eine neue Vokabel vor
        function pruefen() {
            if(status == 'wiederholung'){
                 // Status Wiederholung: Der Benutzer hat die falsche
                // Vokabel erneut eingegeben und Enter gedrueckt
                // Neue Vokabel vorlegen
                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!");
       -->         vokablen.splice(index, 1);
                alert(vokablen);
                uebersetzung.splice(index, 1); <---
                
                
                
                erg=richtigeVokabeln.includes(uebersetzung[index]);
                
                if(erg == false){
                richtigeVokabeln.push(uebersetzung[index]);}
                
                // Ist die geforderte Anzahl von richtigen Antworten erreicht
                // geben wir nur eine Rueckmeldung und legen keine neue Vokabel vor
                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
                
            }
        }}
        // } while (richtigeAntwort == 3)
        // Diese Funktion legt dem Benutzer eine neue Vokabel vor
        // Der Code wird mehrfach benoetigt, daher in einer Funktion
        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>
 
Ich melde mich nochmal. Es gibt ein neues Problem. Bei mir werden die richtigen Vokabeln nach 10 richtigen Vokabeln links auf der website aufgegeben. Hier werden aber falsche Vokabeln ausgegeben, die der User noch gar nicht eingegeben hat. Woran liegt das?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben