Cel lekcji
Uczeń potrafi:
- reagować na zdarzenia kliknięcia
- pobierać dane z formularza
- zmieniać widoczność elementów
- wyświetlać komunikaty
- wypisywać dane w konsoli
Elementy potrzebne do wykonania zadania
1. Pobieranie elementu ze strony
document.getElementById("id_elementu");2. Pobieranie wartości z pola
document.getElementById("id_elementu").value;3. Tworzenie zmiennych
let nazwa = wartosc;4. Zdarzenie kliknięcia
onclick="nazwaFunkcji()"5. Tworzenie funkcji
function nazwaFunkcji() {
}6. Zmiana widoczności elementu
element.style.visibility = "hidden";
element.style.visibility = "visible";7. Instrukcja warunkowa
if (warunek) {
} else {
}8. Porównywanie wartości
==9. Wyświetlanie komunikatu popup
alert("tekst");10. Wypisywanie w konsoli
console.log("tekst");11. Łączenie tekstu z wartościami
"tekst " + zmienna + " tekst " + zmiennaZadanie
Napisz skrypt, który:
- po kliknięciu przycisku ukrywa aktualny blok i pokazuje kolejny
- dla trzeciego bloku sprawdza, czy hasła są identyczne
- jeśli hasła są różne wyświetla komunikat „Podane hasła różnią się”
- pobiera imię i nazwisko z pierwszego bloku
- wyświetla w konsoli tekst: „Witaj imię nazwisko”
Wskazówka
Do zmiany widoczności użyj właściwości visibility, a do sprawdzenia haseł instrukcji warunkowej.
Zadanie dodatkowe
Zmodyfikuj skrypt tak, aby:
- zamiast
alertkomunikat był wyświetlany na stronie - dodać sprawdzenie, czy pola nie są puste