Skrypt 12: Licznik sztuk produktu z przyciskami +/-

Teoria

Klasyczny licznik ilości sztuk produktu w koszyku, z przyciskami zwiększającymi i zmniejszającymi wartość — element, który zobaczysz w niemal każdym sklepie internetowym.

Kod (JavaScript)

<button id="minus">-</button>
<span id="ilosc">1</span>
<button id="plus">+</button>

<script>
    const wyswietlanaIlosc = document.getElementById("ilosc");
    let ilosc = 1;

    document.getElementById("plus").addEventListener("click", function () {
        ilosc++;
        wyswietlanaIlosc.textContent = ilosc;
    });

    document.getElementById("minus").addEventListener("click", function () {
        if (ilosc > 1) { // nie pozwól zejść poniżej 1 sztuki
            ilosc--;
            wyswietlanaIlosc.textContent = ilosc;
        }
    });
</script>

Komentarz i wyjaśnienie kodu

Zmienna ilosc jest zadeklarowana jako let (nie const), bo jej wartość celowo się zmienia. Warunek if (ilosc > 1) przy zmniejszaniu zapobiega zejściu do zera lub wartości ujemnych — bez tego zabezpieczenia licznik mógłby pokazać bezsensowną liczbę sztuk.

Typowe błędy

Częsty błąd to brak dolnego ograniczenia przy zmniejszaniu — bez warunku if licznik mógłby zejść do 0 albo liczb ujemnych, co nie ma sensu przy zamawianiu produktu.