• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Problem Cannot set property 'innerHTML' of null.

VPS Starter Arubacloud
0 głosów
449 wizyt
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ź

+2 głosów
odpowiedź 7 października 2020 przez ScriptyChris Mędrzec (190,190 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,190 p.)
Co konkretnie poprawiłaś?
komentarz 8 października 2020 przez Oscar Nałogowiec (29,290 p.)
Nie ma w ogóle elementu <table>.
komentarz 8 października 2020 przez ScriptyChris Mędrzec (190,190 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,190 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,190 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.

1
komentarz 14 października 2020 przez Casia Nowicjusz (120 p.)
Działa!!! Dziękuję bardzo!!!

Podobne pytania

0 głosów
2 odpowiedzi 5,567 wizyt
pytanie zadane 21 marca 2017 w JavaScript przez Seabool Nowicjusz (150 p.)
0 głosów
1 odpowiedź 481 wizyt
0 głosów
0 odpowiedzi 1,024 wizyt
pytanie zadane 29 czerwca 2018 w JavaScript przez wiktoz Mądrala (7,040 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...