Cannot set property 'innerHTML' of null

pytanie zadane 21 marca 2017 w JavaScript przez Seabool Nowicjusz (150 p.)

Witam.

Robię zadania z JavaScript'u i mam taki mały problem, nie wiem czy coś przeoczyłem, ale w konsoli dostaję błąd po kliknięciu na przycisk "Sprawdź" podany w temacie (Uncaught TypeError: Cannot set property 'innerHTML' of null). Przenoszenie skryptu na koniec body nie pomogło.

Kod:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"/>
	<title></title>
	<script type="text/javascript">
		//Napisać program, który dla trzech wczytanych liczb całkowitych odpowiada, czy mogą być one długościami boków trójkąta (a) prostokątnego, (b) równoramiennego, (c) równobocznego.
		function sortuj(d){
			var x=0;
			n = d.length;
			for(j = 0; j < n - 1; j++){
				for(i = 0; i < n - 1; i++){
					if(d[i] > d[i + 1])
					{
						x = d[i];
						d[i] = d[i + 1];
						d[i + 1] = x;
					}
				}
			}
		}
		function wypisz(d){
			for(var i=0;i<d.length;i++){
				document.write(d[i] + "<br/>");
				d[i] = parseInt(d[i]);
			}
		}
		function sprPrst(d){
			if((d[0] + d[1]) > d[2] && (d[1] + d[2]) > d[0] && (d[0] + d[2]) > d[1])
				document.getElementById("test1").innerHTML = "TAK";
			else
				document.getElementById("test1").innerHTML = "NIE";
		}
		function sprRwnRam(d){
			if(d[0] ==d[1]||d[1] ==d[2]||d[2] ==d[0])
				document.getElementById("test2").innerHTML = "TAK";
			else
				document.getElementById("test2").innerHTML = "TAK";
		}
		function sprRwnBocz(d){
			if(d[0] == d[1] && d[1] == d[2])
				document.getElementById("test3").innerHTML = "TAK";
			else
				document.getElementById("test3").innerHTML = "NIE";
		}
		function sprawdz(){
			var tab = new Array();
			tab[0] = document.getElementById("l1").value;
			tab[1] = document.getElementById("l2").value;
			tab[2] = document.getElementById("l3").value;
			sortuj(tab);
			wypisz(tab);
			sprPrst(tab);
			sprRwnRam(tab);
			sprRwnBocz(tab);
		}
	</script>
</head>
<body>
	<input type="text" id="l1"/>
	<input type="text" id="l2"/>
	<input type="text" id="l3"/>
	<input type="submit" value="Sprawdź" onclick="sprawdz()"/><br/>
	<b>Trójkąt prostokątny: </b><div id="test1"></div><br/>
	<b>Trójkąt równoramienny: </b><div id="test2"></div><br/>
	<b>Trójkąt równoboczny: </b><div id="test3"></div>
</body>
</html>

2 odpowiedzi

odpowiedź 21 marca 2017 przez Fenix Nałogowiec (26,750 p.)
wybrane 22 marca 2017 przez Seabool

Najlepsza

Błąd jest dlatego że nie ma w tym momencie tych divów, a dzieje sie tak z powodu:

  for(var i=0;i<d.length;i++){
                document.write(d[i] + "<br/>");
                d[i] = parseInt(d[i]);
            }

wiecej chyba nie musze dodawac?

komentarz 22 marca 2017 przez Seabool Nowicjusz (150 p.)

Dzięki :) Zrobiłem tą funkcję do testów i zapomniałem o niej.

odpowiedź 21 marca 2017 przez arek01996 Stary wyjadacz (12,100 p.)

Wykonaj cały kod js w wydarzeniu window.onload;

komentarz 21 marca 2017 przez Seabool Nowicjusz (150 p.)

Jeżeli wykonuję cały kod skryptu w window.onload to wtedy otrzymuję błąd, że funkcja sprawdz() nie jest zdefiniowana w onclick.

komentarz 21 marca 2017 przez arek01996 Stary wyjadacz (12,100 p.)

Twój błąd wynika z tego że w momencie użycia skryptu divy jeszcze nie istnieją.

Dlatego użyj zdarzenia, onload np:

document.addEventListener("load", function(){
    document.getElementById("demo").innerHTML = "Hello World";
});

1	komentarz 21 marca 2017 przez Fenix Nałogowiec (26,750 p.) Przyczyną jest kolejność wykonywania funkcji, i zadań które spełniają. Wypisz nadpisuje body, nie zachowując wcześniejszej struktury. Wiec div'y w momencie odpalenia spr~nie istnieją.