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

JS - TypeError: document.getElementById(...) is null

Aruba Cloud PRO i VPS, Openstack, VMWare, MS Hyper-V
0 głosów
1,431 wizyt
pytanie zadane 25 marca 2016 w JavaScript przez RedMartin Użytkownik (640 p.)

Tworzę wisielca z 3 kursy JS Pana M. Zelenty. Nie był bym sobą, jak bym nie zatrzymywał co chwilę filmiku i próbował sam zrobić, więc kod się troszkę różni od tego co jest w kursie.
W każdym razie problem polega na tym, że po odpaleniu w przeglądarce kodu skrypt nie działa poprawnie i wyskakuje błąd " TypeError: document.getElementById(...) is null " jest to przy funkcji "sprawdz();" skopiowałem nawet gotowca funkcji z paczki od Pana M. Zelenty.
Proszę o pomoc, bo kompletnie nie mogę dostrzec co jest powodem błędu. Rozumiem, że cały ten zapis zwraca wartość false, ale nie rozumiem z jakiej przyczyny.
Niżej załączam kod i z góry dziękuję za pomoc :-)

var haslo = "Bez pracy nie ma kołaczy";
haslo	=	haslo.toUpperCase();	//zamiana na duże litery

var dlugosc = haslo.length;
var ile_skuch = 0;

var haslo1 = "";

for ( i=0; i<dlugosc; i++){
		if(haslo.charAt(i)==" ")	haslo1= haslo1 + " ";	//charAt(...) -- tylko do odczytu znaku
		else	haslo1 = haslo1 + "-";
}

function wypisz_haslo(){
	document.getElementById("board").innerHTML	=		haslo1;
}

window.onload		=		start;		//najwiekszy kozak z wybrzeża || przezwisko

var litery = new Array(35);		//tworzenie tablicy

litery[0] = "A";
litery[1] = "Ą";
litery[2] = "B";
litery[3] = "C";
litery[4] = "Ć";
litery[5] = "D";
litery[6] = "E";
litery[7] = "Ę";
litery[8] = "F";
litery[9] = "G";
litery[10] = "H";
litery[11] = "I";
litery[12] = "J";
litery[13] = "K";
litery[14] = "L";
litery[15] = "Ł";
litery[16] = "M";
litery[17] = "N";
litery[18] = "Ń";
litery[19] = "O";
litery[20] = "Ó";
litery[21] = "P";
litery[22] = "Q";
litery[23] = "R";
litery[24] = "S";
litery[25] = "Ś";
litery[26] = "T";
litery[27] = "U";
litery[28] = "V";
litery[29] = "W";
litery[30] = "X";
litery[31] = "Y";
litery[32] = "Z";
litery[33] = "Ż";
litery[34] = "Ź";

function start(){
	
	var tresc_diva = "";
	
	for( i=0; i<35; i++){
		var element = "lit" + i;
		tresc_diva = tresc_diva + '<div class="letter"onclick="sprawdz('+i+')" id = " '+element+' ">'+litery[i] +'</div>'
		if( ( i+1 )%7==0) tresc_diva = tresc_diva + '<div style="clear: both;"></div>'
	}
	
	document.getElementById("alphabet").innerHTML = tresc_diva;
	
	wypisz_haslo();
}

String.prototype.ustawZnak = function(miejsce, znak){
	if(miejsce > this.length - 1) return this.toString();		// 	.toString();   -- konwertowanie na napis (tu akurat chcemy mieć pewność, że to nadal jest napis )
	else return this.substr(0, miejsce) + znak  + this.substr(miejsce+1);	//	.substr(x,y); -- wyjmowanie || wyjmij od x tyle znaków, ile wskazuje y
}

//	alert(nr);	// alert(...)  -- test


function sprawdz(nr)
{
	
	var trafiona = false;
	
	for(i=0; i<dlugosc; i++)
	{
		if (haslo.charAt(i) == litery[nr]) 
		{
			haslo1 = haslo1.ustawZnak(i,litery[nr]);
			trafiona = true;
		}
	}
	
	if(trafiona == true)
	{
		var element = "lit" + nr;
		document.getElementById(element).style.background = "#003300";
		document.getElementById(element).style.color = "#00C000";
		document.getElementById(element).style.border = "3px solid #00C000";
		document.getElementById(element).style.cursor = "default";
		
		wypisz_haslo();
	}
	else
	{
		var element = "lit" + nr;
		document.getElementById(element).style.background = "#330000";
		document.getElementById(element).style.color = "#C00000";
		document.getElementById(element).style.border = "3px solid #C00000";
		document.getElementById(element).style.cursor = "default";	
		document.getElementById(element).setAttribute("onclick",";");// .setAttribute -- ustawianie atrybutu  || zamiast czego co zrobic  (... , ...)
		
		//skucha
		ile_skuch++;
		var obraz = "img/s"+ ile_skuch + ".jpg";
		document.getElementById("szubienica").innerHTML = '<img src="'+obraz+'" alt="" />';
	}
	
	
	wypisz_haslo();
}

 

1 odpowiedź

+1 głos
odpowiedź 25 marca 2016 przez Comandeer Guru (580,340 p.)
A tak dokładnie to która linijka? Najprawdopodobniej po prostu nie masz jakiegos elementu w kodzie HTML.
komentarz 25 marca 2016 przez RedMartin Użytkownik (640 p.)

Chodzi o dokładnie zapisek:
document.getElementById(element).style.background =   "

 if(trafiona == true)
    {
        var element = "lit" + nr;
        document.getElementById(element).style.background = "#003300";
        document.getElementById(element).style.color = "#00C000";
        document.getElementById(element).style.border = "3px solid #00C000";
        document.getElementById(element).style.cursor = "default";
         
        wypisz_haslo();
    }
    else
    {
        var element = "lit" + nr;
        document.getElementById(element).style.background = "#330000";
        document.getElementById(element).style.color = "#C00000";
        document.getElementById(element).style.border = "3px solid #C00000";
        document.getElementById(element).style.cursor = "default";  
        document.getElementById(element).setAttribute("onclick",";");// .setAttribute -- ustawianie atrybutu  || zamiast czego co zrobic  (... , ...)
         
        //skucha
        ile_skuch++;
        var obraz = "img/s"+ ile_skuch + ".jpg";
        document.getElementById("szubienica").innerHTML = '<img src="'+obraz+'" alt="" />';
    }

//------------------KOD Z HTML--------------------------------

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<title>Wisielec</title>
	
	<meta name="description" content="Wisielec" />
	<meta name="keywords" content="wisielec" />		
		
	<link rel="stylesheet"	href="style.css"	type"text/css"	/>
	<script	src="szubienica.js"></script>
	<link href='https://fonts.googleapis.com/css?family=Inconsolata:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
		
</head>

<body>
	
	<div id="container">
			<div id="board"></div>
			<div id="gallows">
					<img src="img/s0.jpg" alt=""/>
			</div>
			<div id="alphabet"></div>
			<div style="clear: both;"></div>
	</div>
	
</body>
</html>


 

komentarz 25 marca 2016 przez Comandeer Guru (580,340 p.)
Obadaj sobie w konsoli, w inspektorze elementów, czy na pewno dany element istnieje.
komentarz 25 marca 2016 przez RedMartin Użytkownik (640 p.)

Ale jak ten element może nie istnieć, jak linijkę wcześniej dodaję
"    var element = "lit" + nr; "
a chwilę później niedziałający skrypt:
document.getElementById(element).style.background = #003300;   "
?

Poza tym kod HTML jest taki sam jak kod P. M. Zelenty, tylko nazwy angielskie divów

komentarz 25 marca 2016 przez RedMartin Użytkownik (640 p.)

Znalazłem problem!
Od kiedy to czy ' i " są obok siebie, czy jednak oddziela je spacja ma znaczenie?
Błąd:
tresc_diva = tresc_diva + '<div class="letter" onclick="sprawdz('+i+')" id=" '+element+' ">'+litery[i]+'</div>';
Poprawnie:
tresc_diva = tresc_diva + '<div class="letter" onclick="sprawdz('+i+')" id="'+element+'">'+litery[i]+'</div>';

komentarz 26 marca 2016 przez Comandeer Guru (580,340 p.)
Nie powinno… prawdę mówiąc patrzę na ten kod i nie rozumiem czemu nie dzialał O.o może to nie była spacja?
komentarz 26 marca 2016 przez RedMartin Użytkownik (640 p.)
Jak pobrać z bloga całą stronę i wstawić spację, to się wszystko psuje. Czemu? Dobre pytanie...
komentarz 15 lutego 2017 przez drraco Początkujący (370 p.)
edycja 15 lutego 2017 przez drraco
Podłączam się do pytania. Miałem ten sam problem. Pierwotnie nie miałem w tym miejscu spacji, i funkcja nie działała. Gdy przepisałem z palca ponownie ten fragment kodu jeszcze raz TEŻ BEZ SPACJI, wtedy funkcja zadziałała. Na filmie (JavaScript - odc.3  -57:00), Pan Mirek nie wstawia spacji i jego kod działa.

Podobne pytania

0 głosów
2 odpowiedzi 303 wizyt
pytanie zadane 29 marca 2016 w JavaScript przez adojado Początkujący (420 p.)
0 głosów
2 odpowiedzi 2,601 wizyt
0 głosów
2 odpowiedzi 427 wizyt
pytanie zadane 17 lutego 2017 w JavaScript przez Mahen Nowicjusz (150 p.)

89,777 zapytań

138,386 odpowiedzi

309,503 komentarzy

59,681 pasjonatów

Advent of Code 2022

Top 15 użytkowników

  1. 1088p. - Argeento
  2. 1032p. - nidomika
  3. 1024p. - rucin93
  4. 1020p. - Michal Drewniak
  5. 1014p. - Łukasz Eckert
  6. 1006p. - Mikbac
  7. 988p. - TheLukaszNs
  8. 963p. - JMazurkiewicz
  9. 960p. - adrian17
  10. 945p. - Jarosław Roszyk
  11. 941p. - Hubert Chęciński
  12. 920p. - Mawrok
  13. 914p. - overcq
  14. 859p. - ssynowiec
  15. 848p. - Adam Salamon
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

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

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...