Zobrazení pole

Skutečné aplikace mají data obvykle v poli a stránka ukazuje, co v poli je. Funguje to stejně jako u počítadla: číslo bylo v proměnné a stránka ho jen ukazovala. Tady jsou položky v poli a funkce je vykreslí na stránku:

const ovoce = ["Jablko", "Hruška"];
const seznamOvoce = document.querySelector("#ovoce");

function zobrazOvoce() {
    seznamOvoce.textContent = "";
    for (const nazev of ovoce) {
        const polozka = document.createElement("li");
        polozka.textContent = nazev;
        seznamOvoce.append(polozka);
    }
}

zobrazOvoce();

Funkce nejdřív seznam vyprázdní: nastavení textContent na prázdný text odstraní všechno, co v prvku je. Pak cyklus vytvoří jedno li pro každý prvek pole. Kdykoli se pole změní, zavolejte funkci znovu a ta seznam vykreslí nanovo:

ovoce.push("Banán");
zobrazOvoce();

Proč seznam nejdřív vyprázdnit? Bez toho by každé zavolání přidalo všechny položky znovu pod ty, které už tam jsou, a stránka by ukazovala Jablko, Hruška, Jablko, Hruška, Banán.

A proč vůbec pole, když se dají položky přidávat rovnou do stránky? Protože data pak zůstanou ve vašem programu a můžete s nimi pracovat: spočítat je pomocí .length, zjistit pomocí .includes(), jestli tam nějaká položka je, nebo v cyklu sečíst ceny. Pole může obsahovat i objekty; text každé položky pak složíte z jejich vlastností, třeba `${produkt.nazev}: ${produkt.cena}`.