Odškrtávání položek

V obchodě se hodí odškrtat, co už máte v košíku. V tomto cvičení se položka po kliknutí označí jako koupená a stránka ji zobrazí přeškrtnutou. Další kliknutí označení zruší.

To, jestli je položka koupená, je informace o položce, takže patří do jejího objektu jako nová vlastnost koupeno s hodnotou true, nebo false: { nazev: "Mléko", cena: 25, koupeno: false }. Funkce zobrazPolozky() pak dá prvku li každé koupené položky třídu koupeno ze stylu stránky, která ho přeškrtne. Protože polozka.koupeno už je true, nebo false, může být sama podmínkou: if (polozka.koupeno) znamená totéž co if (polozka.koupeno === true).

Proč nestačí přidat třídu při kliknutí na položku? Protože zobrazPolozky() při každé změně seznamu vytvoří všechny prvky li znovu. Třída by se starým li zmizela hned, jak byste přidali další položku. Objekty v poli zůstávají, takže informace musí být uložená v nich. Pořád platí pravidlo ze začátku projektu: změňte data a pak stránku znovu zobrazte.

A teď kliknutí. Uvnitř cyklu ve funkci zobrazPolozky() dejte každému li vlastní obsluhu kliknutí. Funkce vzniká uvnitř cyklu, a proto si pamatuje položku (polozka) z daného průchodu cyklem: kliknutí na mléko změní mléko. Operátor ! změní true na false a naopak:

li.addEventListener("click", () => {
    polozka.koupeno = !polozka.koupeno;
    zobrazPolozky();
});

Obsluha volá zobrazPolozky(), aby stránka změnu ukázala. Volat zobrazPolozky() uvnitř zobrazPolozky() tady nevadí: obsluha se nespustí, zatímco se seznam zobrazuje, ale až později, když na položku kliknete.