Forum PHP.pl > [HTML][JS]Prostacki błąd z document.getElementById

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][JS]Prostacki błąd z document.getElementById

MateuszS

8.06.2013, 15:59:40

Witam, nie wiem co się dzieje, ale przestał mi działać JavaScript a raczej jego elementy. Zobaczcie na prosty kod poniżej:

data.js

[JAVASCRIPT] pobierz, plaintext 
var input_data = document.getElementById("data");
input_data.value="asd";
[JAVASCRIPT] pobierz, plaintext

index.php

[HTML] pobierz, plaintext 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>Projekt JS</title>
	<meta name="Content-Type" content="text/html;charset=UTF-8" />
	<script type="text/javascript" src="data.js"></script>
</head>
<body>
	Data: <input type="text" id="data" /> 
	Godz: <input type="text" id="godz" style="width: 100px" /> 
	<input type="button" value="Sprawdź" />
</body>
</html>
[HTML] pobierz, plaintext

Wiadomo co to powinno robić. Po odświeżeniu strony w polu input o id="data" powinno się pojawić "asd". Z tym że JS odmawia posłuszeństwa. Konsola wyrzuca:

Kod

Uncaught TypeError: Cannot set property 'value' of null

//Wiem że TERAZ javascript się bulwersuje gdy próbujemy dostać się do obiektu zanim jeszzce wczyta się reszta HTMLa (wrzucenie skryptu na koniec dokumentu naprawia ten problem) ale nigdy z tym nie było problemu. JS widział zawsze jakby cały plik niezależnie od tego gdzie <script> był includowany (zawsze robilem to w head)

Pisałem takie rzeczy tysiące razy i zawsze śmigało. Może faktycznie czegoś zapomniałem, dawno nie pisałem niczego w JS ale chyba aż tak nie zardzewiałem. Pozdrawiam

SmokAnalog

8.06.2013, 16:03:47

Przyczyna jest prosta - w momencie wykonywania skryptu, drzewo DOM nie jest jeszcze gotowe. Skrypt nie zna jeszcze elementu o ID = data. Załącz skrypt zaraz przed zamknięciem body i/lub zamknij go w zdarzeniu window.onload.

MateuszS

8.06.2013, 16:05:57

Tak doszedłem do tego, z tym że nigdy nie miałem tego problemu. Zawsze includowałem w head (po to z resztą jest nagłówek żeby tam takie rzeczy robić) i nie było problemu. Zrobię tak jak piszeszesz.

lobopol

8.06.2013, 16:06:38

Skrypt odpala się zanim na stronie pojawi się ten input. Albo dodaj skrypt na końcu albo użyj jakiejś biblioteczki do dom ready (bądź sam to napisz)

MateuszS

8.06.2013, 16:08:33

Zawsze używałem jQuery. Tam chyba jest ten problem rozwiązany i dlatego teraz miałem problem gdy używam "czystego" JS

lobopol

8.06.2013, 16:09:51

Jeżeli używałeś dom.ready z jquery to tak

SmokAnalog

8.06.2013, 16:22:43

Najlepiej zrobić i jedno, i drugie: skrypty zawierać na końcu i dodatkowo wywoływać je przy onload. Dla jQuery składnia jest elegancka:

[JAVASCRIPT] pobierz, plaintext 
$(function() {
	...
});
[JAVASCRIPT] pobierz, plaintext

Taki skrypt odpali się dopiero jak drzewo DOM jest gotowe.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.