Niechciany napis "null" w przeglądarce.

Question

Witam.

Piszę sobie "wisielca" razem z Panem Mirosławem i coś dziwnego się porobiło. Do tej pory wszystko było ok, ale teraz kiedy wyświetla mi litery to dodaje na końcu napis "null"... Z czym to moze być związane?

 

window.onload = loadImage;
var image = document.getElementById('hangman-image');
var singleLetterDiv = document.getElementById('single-letter');
var lettersContainer = document.getElementById('letters-container');

function loadImage(){
	image.src = "img/s0.jpg";

	tableWithLetters();
}

function tableWithLetters() {
	var letter = [];
	letter[0] = "A";
	letter[1] = "B";
	letter[2] = "C";

	for (i = 0; i <= 34; i++){
		singleLetterDiv = singleLetterDiv + '<div class="single-letter">A</div>';
	}

	lettersContainer.innerHTML = singleLetterDiv;
}

<div class="container">
		<div class="word-to-guess">
			<p>----- ----- -----</p>
		</div>
		<div class="hangman-image">
			<img src="" alt="" id="hangman-image">
		</div>
		<div class="letters" id="letters-container">
		</div>
	</div>
	<script type="text/javascript" src="script.js"></script>

I tak wiem, że powinienem używać const/let, ale na razie to bez znaczenia (no, chyba, że faktycznie jakieś ma w tym przypadku?)

Comments

M. Zelent udostępnia gotowy kod do swoich filmików, pobierz i porównaj ze swoim kodem, takie sprawdzanie jest też dobrą formą nauki :)
null oznacza, że chcesz wyświetlić zawartość zmiennej, a ona ma po prostu wartość null, zapewne ostatnie pole w tablicy jest puste...

---

Staram się ogólnie pisać na zasadzie - najpierw przeglądnę filmik a potem sam pisze bez zagladania.

Ale zaglądnąłem i nie widzę nic innego... Bo ten napis "null" jest prawdopodbnie jakimś błędem...

Tylko, że nie wyświetlam tablicy a jedynie 34 razy tego samego diva z A w środku. Tablicę miałem dopiero później podpiąć.

---

Popieram jak najbardziej Twoje podejście do nauki, że najpierw piszesz, potem sprawdzasz :)
wygląda na to, że jak pobierasz singleLetterDiv to jest puste to pole i potem w pętli Ci dopisuje do A null,
możesz sprawdzić, np. dopisać przed pętlą for takie coś:
 

singleLetterDiv = "";

 

---

Działa! Dzięki wielkie!

I żeby nie było rozważałem taką opcję, ale...

Najpierw definuję, że zmienna singleLetterDiv to element z htmla o id single-letter
 

var singleLetterDiv = document.getElementById('single-letter');

a potem zmieniam to na pusty element?

---

zmieniasz tylko teraz aby sprawdzić, czy działa, ogólnie tak, jak napisałem wyżej,
to
 

var singleLetterDiv = document.getElementById('single-letter');

sprawia, że pobierasz element o id = "single-letter, ponieważ wyświetla Ci się null to znaczy, że ten element na stronie jest pusty i dlatego masz wartość null, jak go zapełnisz to będzie działało
a ten zapis

singleLetterDiv = "";

powoduje właśnie, że na chwilę ta zmienna ma jakąś wartość czyli nie jest null i już słowo null Ci się nie wyświetla
mam nadzieję, że się nie zamotałeś :)