• 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

Object Storage Arubacloud
0 głosów
1,532 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 (601,110 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 (601,110 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 (601,110 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 356 wizyt
pytanie zadane 29 marca 2016 w JavaScript przez adojado Początkujący (420 p.)
0 głosów
2 odpowiedzi 2,709 wizyt
0 głosów
2 odpowiedzi 621 wizyt
pytanie zadane 17 lutego 2017 w JavaScript przez Mahen Nowicjusz (150 p.)

92,568 zapytań

141,420 odpowiedzi

319,622 komentarzy

61,954 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...