TablicaPro / karta pracy ucznia / JS

JavaScript DOM — lekcja z zadaniami i rozwiązaniem

Klasa: __________ Numer: __________ Data: __________

Pracuj w przygotowanym pliku. Po każdej zmianie zapisz go i sprawdź rezultat.

Kod do rozpoczęcia pracy

const przycisk = document.querySelector("#przywitaj");
przycisk.addEventListener("click", () => {
  powitanie.textContent = "Witamy!";
});

Zadanie 1

Po kliknięciu #dodaj-osobe zwiększ zmienną obecni (let poza funkcją) i pokaż w #obecni tekst „Obecnych: 3”.

Zadanie 2

Obsłuż submit formularza: preventDefault, trim. Pusty wpis → komunikat „Wpisz treść punktu.” w #komunikat. Inaczej: nowy li w #lista, wyczyść pole i komunikat, pokaż liczbę punktów w #licznik.

Zadanie 3

Kliknięcie punktu przełącza klasę zrobione. Licznik: „Punkty planu: 3, zrobione: 1”. Sprawdź też wpis z samymi spacjami i wpis ze znacznikiem <b>.

Sprawdź przed oddaniem

Zadanie 1: 2 pkt; submit z preventDefault: 1 pkt; pusty wpis: 2 pkt; nowy li i czyszczenie pola: 2 pkt; przełączanie klasy: 1 pkt; licznik zrobionych: 1 pkt; testy z tabeli: 1 pkt. Razem 10 pkt.

Jaką zmianę w kodzie potrafisz samodzielnie wyjaśnić?

Drukuj kartę pracy