Sumowanie zaznaczonych opcji pętlą forEach
Treść zadania
W formularzu znajduje się grupa checkboxów z klasą usluga:
<input type="checkbox" class="usluga" value="50" checked> Wymiana oleju (50 zł)
<input type="checkbox" class="usluga" value="80" checked> Wymiana klocków (80 zł)
<input type="checkbox" class="usluga" value="120"> Diagnostyka (120 zł)oraz przycisk <button id="btnSumaUslug">Zsumuj usługi</button> i akapit <p id="lacznieUslugi"></p>. Pobierz wszystkie zaznaczone pola za pomocą document.querySelectorAll('.usluga:checked'), zsumuj ich wartości w pętli forEach i wpisz do akapitu: Koszt usług: 130.00 zł.
Co będzie oceniane
- Pobranie kolekcji z użyciem querySelectorAll('.usluga:checked').
- Sumowanie wartości w pętli forEach.
- Wpisanie Koszt usług: 130.00 zł do akapitu.
- Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.
Testy automatyczne (1)
- Zsumowanie dwóch zaznaczonych usług (50 + 80 = 130 zł) — tekst #lacznieUslugi = Koszt usług: 130.00 zł
Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.
// Pobierz zaznaczone checkboxy i zsumuj w pętli forEach
Wskazówki
Wskazówka 1
Metoda querySelectorAll() z selektorem .usluga:checked zwraca kolekcję zaznaczonych elementów.
Wskazówka 2
Zadeklaruj zmienną let suma = 0;, przejdź po kolekcji pętlą forEach(function(pole) { suma += parseInt(pole.value, 10); }) i wyświetl wynik z toFixed(2).