Produkte abhaken

Im Laden ist es praktisch, abzuhaken, was schon im Wagen liegt. In dieser Übung markiert ein Klick auf ein Produkt es als gekauft, und die Seite zeigt es durchgestrichen an. Ein weiterer Klick hebt die Markierung wieder auf.

Ob ein Produkt gekauft ist, ist eine Information über das Produkt, sie gehört also in sein Objekt, als neue Eigenschaft gekauft mit dem Wert true oder false: { name: "Milch", preis: 2, gekauft: false }. zeigeProdukte() gibt dann dem li jedes gekauften Produkts die Klasse gekauft aus dem Stil der Seite, die es durchstreicht. Da produkt.gekauft schon true oder false ist, kann es allein die Bedingung sein: if (produkt.gekauft) bedeutet dasselbe wie if (produkt.gekauft === true).

Warum fügst du die Klasse nicht einfach beim Klick auf das Produkt hinzu? Weil zeigeProdukte() alle li-Elemente neu erstellt, wann immer sich die Liste ändert. Die Klasse würde mit dem alten li verschwinden, sobald du ein weiteres Produkt hinzufügst. Die Objekte im Array bleiben, also muss die Information dort gespeichert werden. Die Regel vom Anfang des Projekts gilt weiterhin: Ändere die Daten und zeige dann die Seite noch einmal an.

Jetzt das Klicken. Gib in der Schleife in zeigeProdukte() jedem li seinen eigenen Klick-Handler. Die Funktion wird innerhalb der Schleife erstellt und merkt sich so das produkt aus diesem Durchlauf der Schleife: Ein Klick auf die Milch ändert die Milch. Der Operator ! macht aus true false und umgekehrt:

li.addEventListener("click", function () {
    produkt.gekauft = !produkt.gekauft;
    zeigeProdukte();
});

Der Handler ruft zeigeProdukte() auf, damit die Seite die Änderung zeigt. Es ist in Ordnung, zeigeProdukte() innerhalb von zeigeProdukte() aufzurufen: Der Handler läuft nicht, während die Liste angezeigt wird, sondern erst später, wenn du auf das Produkt klickst.