Prezentacja listy tytułów metodą forEach
Treść zadania
W skrypcie mamy tablicę książek:const ksiazki = [
{ tytul: "Wiedźmin" },
{ tytul: "Solaris" },
{ tytul: "Lalka" }
];
W dokumencie znajduje się przycisk <button id="btnWyswietlKsiazki">Pokaż katalog</button> oraz lista <ul id="listaKsiazek"></ul>.
Po kliknięciu przycisku:
1. Wyczyść listę #listaKsiazek.innerHTML = ''.
2. Przejdź po tablicy za pomocą ksiazki.forEach(...), twórz element <li> z tytułem książki i dołączaj go do listy.
Co będzie oceniane
- Wyczyszczenie listy przed generowaniem.
- Użycie metody forEach do iteracji po obiektach.
- Dodanie trzech elementów li z prawidłowymi tytułami.
- Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.
Testy automatyczne (1)
- Wyświetlenie 3 pozycji z tablicy obiektów — licznik #listaKsiazek li = 3; tekst #listaKsiazek li:first-child = Wiedźmin; tekst #listaKsiazek li:last-child = Lalka
Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.
const ksiazki = [
{ tytul: "Wiedźmin" },
{ tytul: "Solaris" },
{ tytul: "Lalka" }
];
// Wygeneruj li w #listaKsiazek po kliknięciu #btnWyswietlKsiazki
Wskazówki
Wskazówka 1
Metoda forEach przyjmuje funkcję zwrotną, do której w każdym kroku przekazywany jest bieżący obiekt z tablicy.
Wskazówka 2
Wyczyść kontener listy, a w ciele funkcji przekazanej do forEach twórz za każdym razem element li, przypisuj do niego pole tytułu bieżącego obiektu i dołączaj do listy ul.