Najpierw spróbujmy zrozumieć pierwotną przyczynę, dlaczego tak się dzieje.
Dlaczego otrzymuję komunikat o błędzie lub Uncaught TypeError: Nie można ustawić właściwości „innerHTML” na wartość null?
Przeglądarka zawsze ładuje cały HTML DOM od góry do dołu. Każdy kod JavaScript zapisany w scripttagach (obecny w headsekcji twojego pliku HTML) jest wykonywany przez silnik renderujący przeglądarki nawet przed załadowaniem całego DOM (różne tagi elementów HTML obecne w tagu body). Skrypty obecne w headtagu próbują uzyskać dostęp do elementu posiadającego id, hellonawet zanim został on faktycznie wyrenderowany w DOM. Więc oczywiście JavaScript nie dostrzegł elementu i dlatego w końcu pojawia się błąd zerowego odwołania.
Jak sprawić, by działało jak wcześniej?
Chcesz, aby komunikat „cześć” był wyświetlany na stronie, gdy tylko użytkownik wyląduje na Twojej stronie po raz pierwszy. Musisz więc podłączyć swój kod w momencie, gdy jesteś całkowicie pewien, że DOM jest w pełni załadowany, a helloelement id jest dostępny / dostępny. Można to osiągnąć na dwa sposoby:
- Zmień kolejność skryptów : w ten sposób skrypty będą uruchamiane dopiero po
hellozaładowaniu DOM zawierającego element id. Możesz to osiągnąć, po prostu przesuwając tag script za wszystkimi elementami DOM, tj. Na dole, gdzie bodykończy się tag. Ponieważ renderowanie odbywa się od góry do dołu, skrypty są wykonywane na końcu i nie napotkasz żadnego błędu.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div id="hello"></div>
<script type ="text/javascript">
what();
function what(){
document.getElementById('hello').innerHTML = 'hi';
};
</script>
</body>
</html>
- Użyj przechwytywania zdarzeń : silnik renderujący przeglądarki zapewnia
window.onloadprzechwytywanie oparte na zdarzeniach przez zdarzenie, które daje wskazówkę, że przeglądarka zakończyła ładowanie DOM. Więc do czasu, gdy to zdarzenie zostanie uruchomione, możesz mieć pewność, że Twój element o helloidentyfikatorze już załadowany do DOM i jakikolwiek uruchomiony później JavaScript, który próbuje uzyskać dostęp do tego elementu, nie zawiedzie. Robisz więc coś takiego jak poniższy fragment kodu. Zwróć uwagę, że w tym przypadku skrypt działa, mimo że znajduje się na górze dokumentu HTML wewnątrz headtagu.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type ="text/javascript">
window.onload = function() {
what();
function what(){
document.getElementById('hello').innerHTML = 'hi';
};
}
</script>
</head>
<body>
<div id="hello"></div>
</body>
</html>