Warenkorb - Array sortieren und einzelne li-Elemente löschen

heartbeat

Hallo Leute,

ich habe eine Liste mit Hilfe eines Arrays erstellt. Zu jedem Punkt gibt es einen Button 'in den Warenkorb'. Klickt man einen Button wird der jeweilige Punkt in einem weiteren Array ausgegeben. Bei der Ausgabe wird erneut ein Button erzeugt, mit dem man das jeweilige Element wieder aus dem Warenkorb löschen kann.
Bei der Ausgabe sollen außerdem die hinzugefügten Punkte in alphabetischer Reihenfolge sortiert werden.
Leider funktioniert das Sortieren im Warenkorb und das Löschen eines einzelnen Punktes aus dem Warenkorb noch nicht. Kann mir da jemand weiterhelfen?
Ich habe folgenden Code:

Code

var kurs= ['Mathematik', 'Elektrotechnik', 'Physik', 'Java-Programmierung']
var ausgabeliste = [];
var ausgewaehlterKurs;
var neu;


function zeigeKursliste() {
    for (i = 0; i < kurs.length; i++) {
        ausgewaehlterKurs= kurs[i];
        var buttonWarenkorb = "<button type='button' value='" + ausgewaehlterKurs+ 
            "' onclick='fuegeKursHinzu(this)'>in den Warenkorb</button>";
        ausgabe += "<tr><td>" + ausgewaehlterKurs+ "</td><td>" + buttonWarenkorb + "</td></tr>";
    }
    ausgabe += "</table></p>";
    ausgabe += "<p><table><tr><th>gebuchter Kurs</th><th></th></tr>";
    ausgabe += "<tr><td id='ausgabeliste'></td><td></td></tr>";
    ausgabe += "</table></p>";
    document.body.innerHTML = ausgabe;
}


function fuegeKursHinzu(neu) {
    ausgewaehlterKurs= neu.value;
    ausgabeliste.push(ausgewaehlterKurs);
    ausgabeliste.sort();
    var buttonX = "<button type='button' onclick='entferneKurs(this)'>X</button>";
    document.getElementById("ausgabeliste").innerHTML += ausgewaehlterKurs+ " " + buttonX + "<br/>";
}


function entferneKurs(neu) {
    for (var e = 0; e < ausgabeliste.length; e++) {
        //ausgabeliste = ausgabeliste.slice(e, 0).concat(ausgabeliste.slice(e, 0));
        ausgabeliste.splice(e, 1);
    }
    //ausgabeliste.sort();
    var buttonX = "<button type='button' onclick='entferneKurs(this)'>X</button>";
    document.getElementById("ausgabeliste").innerHTML = ausgewaehlterKurs+ " " + buttonX +"<br/>";
}

Alles anzeigen

doctorseus

HTML

<html><head><title>Test</title>
<script type="text/javascript">
var ausgabe = '';
var kurs= ['Mathematik', 'Elektrotechnik', 'Physik', 'Java-Programmierung']
var ausgabeliste = [];
var ausgewaehlterKurs;
var neu;




function zeigeKursliste() {
    for (i = 0; i < kurs.length; i++) {
    ausgewaehlterKurs= kurs[i];
    var buttonWarenkorb = "<button type='button' value='" + ausgewaehlterKurs+ 
        "' onclick='fuegeKursHinzu(this)'>in den Warenkorb</button>";
    ausgabe += "<tr><td>" + ausgewaehlterKurs+ "</td><td>" + buttonWarenkorb + "</td></tr>";
    }
    ausgabe += "</table></p>";
    ausgabe += "<p><table><tr><th>gebuchter Kurs</th><th></th></tr>";
    ausgabe += "<tr><td id='ausgabeliste'></td><td></td></tr>";
    ausgabe += "</table></p>";
    document.body.innerHTML = ausgabe;
}




function refreshChoosenCourses(){
    document.getElementById("ausgabeliste").innerHTML = "";
    for(var i = 0; i < ausgabeliste.length; i++){
        var buttonX = "<button type=\"button\" onclick=\"entferneKurs("+i+")\">X</button>";
        document.getElementById("ausgabeliste").innerHTML += ausgabeliste[i]+ " " + buttonX + "<br/>";
    }
}




function fuegeKursHinzu(neu) {
    ausgewaehlterKurs= neu.value;
    ausgabeliste.push(ausgewaehlterKurs);
    ausgabeliste.sort();




    refreshChoosenCourses();
}




function entferneKurs(elementId) {
    for (var e = 0; e < ausgabeliste.length; e++) {
    if(e == elementId){
        ausgabeliste.splice(e, 1);
    }
    }
    refreshChoosenCourses();
}




</script>
</head>
    <body onload="javascript:zeigeKursliste();">
    </body>
</html>

Alles anzeigen

Die einfachste Art (so wie hier) ist es die Ausgabe immer neu zu erzeugen falls sich ein Element ändert, sortiert oder gelöscht wird. Mit "i

nnerHTML += "

ein Element an die Liste anzuhängen und dann noch zu wollen das dieser HTML-Text automatisch sortiert wird kann nicht funktionieren. Gelöscht wird mit der Arrayposition welche der Funktion per Parameter übergeben wird. Dadurch ist es auch möglich mehrere gleiche Kurse in das Array zu packen und den richtigen zu löschen. (Wie du das vor hattest ist mir schleierhaft

)

Jetzt mitmachen!