DOM (pobieranie i zmiana elementów)

Jak podpiac skrypt

Umieszczaj <script> przed </body> lub w <head>.

Wywolanie funkcji przez klikniecie

Nazwa w onclick="..." musi sie zgadzac z nazwą funkcji w <script>.

Pobieranie elementu — 4 sposoby

Odczytanie wartosci z pol formularza

Wazne: .value zawsze zwraca tekst (string), nawet jesli uzytkownik wpisal liczbe.
Zeby liczyc — uzyj parseInt() lub parseFloat() (notatka 7).

Zmiana zawartosci elementu

Zmiana stylu CSS z poziomu JS

Nazwy wlasciwosci CSS w JS sa camelCase:
background-color → backgroundColor
font-size → fontSize
border-radius → borderRadius

Zmiana atrybutow HTML

Kompletny przyklad — pobierz i wyswietl

HTML:

JavaScript:

Kompletny przyklad — kalkulator puszek (arkusz 2023)

HTML:

JavaScript:

Schemat funkcji na egzaminie (template)

Czeste bledy

Blad	Poprawnie
`getElementById('imie').value` gdy `id="Imie"`	ID jest wrazliwe na wielkosc liter
`wynik.innerHTML = liczba` — liczba nie pojawia sie	Sprawdz czy `id="wynik"` istnieje w HTML
Zmiana `background-color` przez JS	`element.style.backgroundColor` (camelCase!)
`.value` na checkboxie	Checkbox uzywaj `.checked` (true/false)
Brak `type="button"` na przycisku JS	Bez `type="button"` przycisk wyslije formularz