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

Aufgabe Warenkorb mit JavaScript

C

capricorn2388

Neues Mitglied
Hallo zusammen,
bin JavaScript Anfänger und gerade dabei eine Übungsaufgabe zu Lösen.

Aufgabe:
Gegeben ist eine Seminarliste
1. Zu jedem Seminar gibt es einen Button in den Warenkorb. Drückt der Anwender den Button, so
fügt das Script dem Warenkorb das neue Seminar hinzu. Das gleiche Seminar kann auch mehrfach
im Warenkorb liegen. Der Warenkorb wird als Bulletliste dargestellt. Er zeigt die Seminare stets in
alphabetischer Reihenfolge.
2. Neben jedem Seminar im Warenkorb gibt es einen Entfernen-Button »X«. Klickt der Anwender auf
den Button, so wird das entsprechende Seminar entfernt.

Bei Punkt 1 bin ich noch klar gekommen aber bei Punkt 2 komm ich jetzt nicht weiter. Mir wurde gesagt ich solle hier mit slice arbeiten aber ich weiß nicht wie das funktionieren soll?!

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
    <script type="text/javascript" src="warenkorb.js"></script>
    </head>
    <body>
    
    <table>
        <tr>
            <th>Seminare</th>
            <th>Preis</th>
            <th></th>
        </tr>
        <tr>
            <td id="seminar1">Ruby on Rails</td>
            <td>1.950 €</td>
            <td><input type="button" value="in den Warenkorb" onclick="zumWarenkorb(1);" />
        </tr>
        <tr>
            <td id="seminar2">Ajax & DOM-Scripting</td>
            <td>1.170 €</td>
            <td><input type="button" value="in den Warenkorb" onclick="zumWarenkorb(2);" />
        </tr>
        <tr>
            <td id="seminar3">Java-Programmierung</td>
            <td>1.800 €</td>
            <td><input type="button" value="in den Warenkorb" onclick="zumWarenkorb(3);" />
        </tr>
        <tr>
            <td id="seminar4">PHP-Programmierung</td>
            <td>1.500 €</td>
            <td><input type="button" value="in den Warenkorb" onclick="zumWarenkorb(4);" />
        </tr>
    </table>
    
    <h2>Warenkorb</h2>
    <ul id="liste"></ul>
    </body>
</html>
PHP: 
var warenkorb = [];

function zumWarenkorb(nr) {
    
    var ausgabe = '';
    
    var seminar = document.getElementById('seminar' + nr).innerHTML;
    warenkorb.push(seminar);
    
    for (var i = 0; i < warenkorb.length; ++i) {
        warenkorb.sort();
        ausgabe += '<li id="nr' + i + '">';
        ausgabe += warenkorb[i];
        ausgabe += '<input type="button" value="X" id="loeschen" onclick="loescheNr();" />';
        ausgabe += '</li>';
    }
    
    
    document.getElementById('liste').innerHTML = ausgabe;
    
}

function loescheNr() {
}
 
Werbung:
danke für deine Hilfe aber irgendwie hilft mir das jetzt auch nicht weiter!
Es soll ja immer bei einem Klick auf den Entfernen-Button (X) dieser aus dem Warenkorb gelöscht werden.
 
Werbung:
Javascript: Element aus Array löschen durch splice(), siehe z. B. hier:
JavaScript: Element aus Array löschen :: Ein Karlsruher Bloggt!
Du musst natürlich vorher das richtige Element aus dem Array heraussuchen. Dies kannst Du vermeiden, indem Du der Funktion loescheNr() gleich den richtigen Index mitgibst:
Code: 
        ausgabe += '<input type="button" value="X" id="loeschen" onclick="loescheNr([B]' + i + '[/B]);" />';
Code: 
function loescheNr(idx) {
  warenkorb.splice(idx, 1);
}
Anschließend den Warenkorb neu anzeigen.
 
Zuletzt bearbeitet von einem Moderator:
So wird ein Schuh daraus.

PHP: 
ausgabe += '<input type="button" value="X" id="loeschen" onclick="loescheNr(this.id);" />';

function loescheNr(id) {
    warenkorb.splice(id, 1);
    var removeKurs = document.getElementById(id).parentNode.parentNode;
     removeKurs.removeChild(removeKurs.firstChild);
}

Aber rechnen kann man mit der Funktion trotzdem noch nicht.

btw. Bei der Gelegenheit fällt mir wieder auf, wie unflexibel Traversieren mit vanilla JS doch ist.
 
Vielen Dank hab's jetzt hinbekommen.

Code: 
var warenkorb = [];

function zumWarenkorb(nr) {
    var seminar = document.getElementById('seminar' + nr).innerHTML;
    warenkorb.push(seminar);
    warenkorbAusgeben();
}

function warenkorbAusgeben() {
    var ausgabe = '';
        for (var i = 0; i < warenkorb.length; ++i) {
            warenkorb.sort();
            ausgabe += '<li id="nr' + i + '">';
            ausgabe += warenkorb[i];
            ausgabe += '<input type="button" value="X" id="loeschen" onclick="loescheNr(' + i + ');" />';
            ausgabe += '</li>';
    }
    document.getElementById('liste').innerHTML = ausgabe;
}

function loescheNr(id) {
    warenkorb.splice(id, 1);
    warenkorbAusgeben();
}
 
Werbung:
Das Sortieren solltest Du aber lieber vor der Schleife notieren:
Code: 
        warenkorb.sort();
        for (var i = 0; i < warenkorb.length; ++i) {
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben