• 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

VPS Starter Arubacloud
0 głosów
1,525 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 (599,730 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 (599,730 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 (599,730 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 353 wizyt
pytanie zadane 29 marca 2016 w JavaScript przez adojado Początkujący (420 p.)
0 głosów
2 odpowiedzi 2,703 wizyt
0 głosów
2 odpowiedzi 615 wizyt
pytanie zadane 17 lutego 2017 w JavaScript przez Mahen Nowicjusz (150 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 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!

...