Skrypt 16: Losowanie elementu z tablicy (np. cytat dnia)

Teoria

Losuje jeden element z gotowej listy (cytat, ciekawostka, porada) i pokazuje go na stronie — ten sam mechanizm losowania przyda się np. do wybrania losowego produktu "polecanego dnia".

Kod (JavaScript)

<p id="cytatDnia"></p>
<button id="losujCytat">Losuj inny cytat</button>

<script>
    const cytaty = [
        "Kod, który działa, to dopiero połowa sukcesu — drugą połową jest kod, który rozumie ktoś inny.",
        "Najlepszy kod to taki, którego nie trzeba było w ogóle pisać.",
        "Debugowanie jest dwa razy trudniejsze niż pisanie kodu."
    ];

    function losujINaKtoreCytat() {
        const losowyIndeks = Math.floor(Math.random() * cytaty.length);
        document.getElementById("cytatDnia").textContent = cytaty[losowyIndeks];
    }

    document.getElementById("losujCytat").addEventListener("click", losujINaKtoreCytat);

    losujINaKtoreCytat(); // pokaż jeden cytat od razu przy wczytaniu strony
</script>

Komentarz i wyjaśnienie kodu

Math.random() zwraca losową liczbę zmiennoprzecinkową z przedziału od 0 (włącznie) do 1 (wyłącznie). Pomnożenie przez cytaty.length (liczbę elementów tablicy) i zaokrąglenie w dół przez Math.floor() daje losowy, poprawny INDEKS tablicy — nigdy nie "wyjdzie" poza jej zakres.

Typowe błędy

Częsty błąd to zapomnienie Math.floor() — bez zaokrąglenia Math.random() * cytaty.length dałoby liczbę z ułamkiem (np. 1.7), która nie jest poprawnym indeksem tablicy.