Produkte hinzufügen
Jetzt kommt der wichtigste Teil: Produkte von der Seite aus hinzufügen. Wenn du auf den Button Hinzufügen klickst, soll das Skript:
- den Namen und den Preis aus den Textfeldern lesen,
- daraus ein neues Objekt machen und mit
push()ans Ende des Arrays hängen, - die Liste mit
zeigeProdukte()noch einmal anzeigen, was auch die Gesamtsumme aktualisiert.
Lies die Felder innerhalb des Klick-Handlers, der Funktion, die beim Klick auf den Button läuft. Sie läuft erst in diesem Moment, liest also, was gerade in den Feldern steht. Wenn du sie oben im Skript lesen würdest, bekämst du, was beim Laden der Seite darin stand: leeren Text.
Und denke daran, dass der value eines Textfelds immer Text ist, auch in einem Feld für Zahlen. Ohne Number() wäre der Preis der Text "4", und die Gesamtsumme würde Texte aneinanderhängen, statt Zahlen zu addieren: 10 + "4" ergibt "104".
Jedes Mal, wenn du auf Ausführen klickst, wird die Seite neu geladen, und die Liste beginnt wieder mit den drei Produkten aus dem Array.
So schreibst du es:
Anweisungen
- 1
Füge
hinzufuegenButtoneinen Klick-Handler hinzu (addEventListener("click", ...)). Speichere darin den Namen (nameEingabe.value) in einer Konstantenameund den Preis als Zahl (Number(preisEingabe.value)) in einer Konstantepreis. Füge dann das Objekt{ name: name, preis: preis }mitpush()zuproduktehinzu und rufezeigeProdukte()auf. Probiere es aus: TippeKäseund4ein und klicke auf Hinzufügen. Die Gesamtsumme steigt auf14. - 2
Leere am Ende des Klick-Handlers beide Felder (setze ihren
valueauf""), damit du gleich das nächste Produkt eintippen kannst.