Cel lekcji
Uczeń potrafi:
- reagować na zdarzenia kliknięcia
- pobierać elementy ze strony
- zmieniać właściwości CSS za pomocą JavaScript
- ukrywać i pokazywać elementy
Elementy potrzebne do wykonania zadania
1. Pobieranie elementu ze strony
document.getElementById("id_elementu");2. Zdarzenie kliknięcia
onclick="nazwaFunkcji()"3. Tworzenie funkcji
function nazwaFunkcji() {
}4. Zmiana stylu elementu
element.style.wlasciwosc = "wartosc";5. Ukrywanie elementu
element.style.display = "none";6. Pokazywanie elementu
element.style.display = "block";7. Tworzenie zmiennych
let nazwa = wartosc;8. Funkcja z parametrem (opcjonalnie)
function nazwaFunkcji(parametr) {
}Zadanie
Napisz skrypt, który:
- reaguje na kliknięcie w cytat
- ukrywa aktualnie kliknięty cytat
- pokazuje kolejny cytat
- działa cyklicznie dla trzech cytatów
Wskazówka
Wykorzystaj zmianę właściwości display, aby ukrywać i pokazywać elementy.
Zadanie dodatkowe
Zmodyfikuj skrypt tak, aby:
- zamiast
blockużyć innego sposobu wyświetlania - zastosować jedną funkcję obsługującą wszystkie cytaty