Problem Cannot set property 'innerHTML' of null.

pytanie zadane 7 października 2020 w JavaScript przez Casia Nowicjusz (120 p.)

Witam, po uruchomieniu kodu mającego na celu powstanie tabliczki mnożenia w tabeli, pojawia się błąd: Uncaught TypeError: Cannot set property 'innerHTML' of null.

Próbowałam już wszystkiego i nie mogę znaleźć błędu.

Z góry dziękuję za pomoc.

<html>
<head>
<meta charset="utf-8">
<script src="js.js"></script>
</head>
<body>
<div id="t"></div>
</body>
</html>

function tabliczka_mnozenia () {
		var a=[1,2,3,4,5,6,7,8,9,10];
	var b=[1,2,3,4,5,6,7,8,9,10];
	var lancuch="";
	var lan=" ";
	for(x=0;x<a.length;x++){
		lan= lan +'<td>' +a[x]+ '</td>';
	
	};
	lan='<tr>'+'<td></td>'+lan+'</tr>';
	var tabela = document.getElementById("t");
	console.log(tabela);
	document.getElementById("tabela").innerHTML ="cos";
	for(j=0; j<a.length; j++){
		
		lancuch='<tr>'+'<td>'+ a[j]+'</td>';
		
		var i;
		for (i=0; i<b.length; i++){
			var c=parseFloat(i+1)* parseFloat(j+1);
			lancuch=lancuch+ '<td>'+c+'</td>';
		}
		lancuch=lancuch+'</tr>';
		var tabela = document.getElementById("t");
		tabela.innerHTML=lancuch;
	}
}

tabliczka_mnozenia ();

1 odpowiedź

odpowiedź 7 października 2020 przez ScriptyChris Mędrzec (190,170 p.)

Próbowałam już wszystkiego i nie mogę znaleźć błędu.

A próbowałeś umieścić podpięcie skryptu w takim miejscu, aby element, do którego próbujesz się w nim dostać był już dostępny na stronie?

Poza tym, próbujesz pobrać element o id tabela, a takiego nie ma w kodzie HTML, który pokazałeś.

komentarz 7 października 2020 przez Casia Nowicjusz (120 p.)

poprawiłam. to nadal nie ten problem

komentarz 7 października 2020 przez ScriptyChris Mędrzec (190,170 p.)

Co konkretnie poprawiłaś?

komentarz 8 października 2020 przez Oscar Nałogowiec (29,360 p.)

Nie ma w ogóle elementu <table>.

komentarz 8 października 2020 przez ScriptyChris Mędrzec (190,170 p.)

No tak... czyli teraz ten element dodałaś w HTML?

A po drugie, czy sprawdziłaś kolejność podpięcia skryptu względem tego elementu HTML (to była pierwsza podpowiedź do Twojego problemu)?

komentarz 14 października 2020 przez Casia Nowicjusz (120 p.)

Tak, sprawdziłam kolejność podpięcia i naprawiłam to.
Teraz mam tak:

<!Doctype HTML>
<html>
<head>
<meta charset="utf-8">

</head>
<body>
<table id="tabela">

<script src="skrypt.js"></script>


</table>

</body>
</html>

function tabliczka_mnozenia() {
	var a=[1,2,3,4,5,6,7,8,9,10];
	var b=[1,2,3,4,5,6,7,8,9,10];
	var lancuch="";
	var lan=" ";
	for(x=0; x>a.length;x++) {
		lan= lan + '<td>' +a[x] + '</td>';
		
	};
	lan='<tr>' + '<td></td>' +lan+'</tr>';
	document.getElementById("tabela").innerHTML=lan;
	console.log(lan);
	
	for(j=0; j<a.length; j++) {
		lancuch='<tr>' + '<td>' + a[j] + '</td>';
		
		var i;
		for (i=0; i<b.length; i++) {
			var c=parseFloat(i+1)* parseFloat(j+1);
			lancuch=lancuch + '<td>' + c + '</td>';
			
		};
		
		lancuch=lancuch+'</tr>';
		document.getElementById("tabela").innerHTML=lancuch;
		console.log(lancuch);
		
	};
	
	
}
tabliczka_mnozenia ();

Teraz wyświetla mi się ostatni element pętli zamiast całości

komentarz 14 października 2020 przez ScriptyChris Mędrzec (190,170 p.)

Która zmienna ma wartość ostatniego elementu pętli zamiast całości?

komentarz 14 października 2020 przez Casia Nowicjusz (120 p.)

document.getElementById("tabela").innerHTML=lancuch; to wyświetla ostatni wiersz tabeli stworzonej w pętli zamiast całości (całej tabliczki mnożenia)

komentarz 14 października 2020 przez ScriptyChris Mędrzec (190,170 p.)

Bo w każdej iteracji nadpisujesz już istniejącą zawartość HTML elementu od id tabela, zamiast ją sklejać (dodawać). Zamień operator = na += w 25 linii.