jesteś tutaj
277
Interakcja ze stronami WWW
Jazda próbna wokół planet
Już wiesz, jak używać metody
document.getElementById
, by odwoływać się do
wybranego elementu strony oraz jak stosować właściwość
innerHTML
, by zmieniać
zawartość elementu. A teraz spróbuj to zrobić naprawdę.
Poniżej przedstawiliśmy kod HTML strony z planetami. Wewnątrz elementu
KHDG!
znajduje się element
<script>
, w którym umieścimy kod oraz trzy nagłówki
i akapity — po jednym dla każdej planety: zielonej, czerwonej i niebieskiej. Jeśli
jeszcze tego nie zrobiłeś, powinieneś wpisać kod HTML strony oraz kod JavaScript,
który zmodyfikuje jej DOM.
<!doctype html>
<html lang=”pl”>
<head>
<meta charset=”utf-8”>
<title>Planety</title>
<script>
var planet = document.getElementById(”greenplanet”);
planet.innerHTML = ”Alarm czerwony: rozpoczÚto ostrzaï z fazeröw!”;
</script>
</head>
<body>
<h1>Zielona planeta</h1>
<p id=”greenplanet”>Wszystko jest w porzÈdku.</p>
<h1>Czerwona planeta</h1>
<p id=”redplanet”>Nie ma tu nic ciekawego.</p>
<h1>Niebieska planeta</h1>
<p id=”blueplanet”>Wszystkie systemy sprawne.</p>
</body>
</html>
To jest nasz element
<script> z kodem.
A to jest element <p>,
którego zawartość chcesz
zmienić w skrypcie.
HALO! Huston, mamy problem
— na zielonej planecie wciąż
widoczny jest tekst „Wszystko
jest w porządku.”. Gdzie tkwi
błąd?
Podobnie jak wcześniej,
pobieramy element <p>
o identyfikatorze „greenplanet”
i zmieniamy jego zawartość.
Kiedy już to wpiszesz, zapisz plik i wczytaj go do przeglądarki,
aby na własne oczy zobaczyć magię, która dzieje się na zielonej
planecie.
278
Rozdział 6.
Rozmyślania o tym, dlaczego kod nie działa
A faktycznie… Zapomnieliśmy wspomnieć
o jednej rzeczy
Kiedy operujemy na DOM, bardzo ważne jest, by kod był
wykonywany wyłącznie
po zakończeniu wczytywania strony.
Jeśli o tym zapomnisz, istnieją spore szanse, że w momencie
wykonywania kodu DOM jeszcze nie będzie utworzony.
Zastanówmy się nad tym, co się stało: umieściliśmy kod
w elemencie
KHDG!
, zatem zostanie on wykonany, zanim jeszcze
przeglądarka odczyta i przeanalizuje dalszą część strony. To duży
problem, gdyż w momencie jego wykonywania obiekt elementu
o identyfikatorze „greenplanet” jeszcze nie istnieje.
A zatem, co się właściwie dzieje w kodzie? Otóż wywołanie
metody
getElementById
zamiast obiektu, na którym nam zależy,
zwraca
null
, co powoduje wystąpienie błędu; jednocześnie
przeglądarka świadoma, że coś takiego może się zdarzyć,
kontynuuje działanie i wyświetla dalszą część strony, nie
zmieniając zawartości elementu zielonej planety.
A w jaki sposób można rozwiązać ten problem? Można przenieść
kod na sam koniec elementu
ERG\!
; istnieje jednak jeszcze
bardziej niezawodny sposób dający pewność, że kod zostanie
wykonany w odpowiednim momencie — sposób, by powiedzieć
przeglądarce: „Słuchaj, wykonaj ten kod dopiero wtedy, gdy
cała strona zostanie wczytana, a DOM będzie już utworzony”.
Poznasz go na następnej stronie.
Trzy razy sprawdziłem kod
strony i skrypt, ale ta strona
nie działa i już. Nie widzę, by
po wyświetleniu w przeglądarce
cokolwiek się na niej zmieniało.
Po wczytaniu strony
wyświetl okno
konsoli, w większości
przeglądarek zostanie
w nim wyświetlony
komunikat o błędzie.
Konsola to świetne
narzędzie do
testowania skryptów.
Uncaught TypeError:
Cannot set property
'innerHTML' of null
.RQVROD-DYD6FULSW
Nieprzechwycony błąd TypeError:
Nie można ustawić właściwości
'innerHTML' obiektu null

Get Programowanie w JavaScript Rusz głową! now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial