skrypt javascript - gra w wisielca

Question

Witam, po kilkudziesięciu minutach ślęczenia nad skryptem postanowiłem tutaj szukać pomocy. Mianowicie obejrzałem 3 odcinek kursu JS Mirosława Zelenta i chciałem napisać swój własny skrypt z w/w grą. Skrypt jest już skończony, jednak gdy klikam w poszczególne literki to niby jest jakaś reakcja, tzn jest dźwięk, ale literki nie zmieniają koloru, nie zmienia się obrazek z szubienicą oraz pola z hasłem. Porównywałem mój kod linia w linię z kodem Mirosława i wszystko jest identyczne. Nawet ściągnąłem program WinMerge do porównywania tekstów i tam też wszystko jest identyczne, tylko że mój skrypt nie działa, a ten z kursu tak. Kod html i css oraz folder z obrazkami sprawdziłem i wszystko jest ok. Ktoś ma jakieś pomysły, w czym może tkwić problem?

 

var haslo = "Bez pracy nie ma kołaczy";
haslo = haslo.toUpperCase();

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

var yes = new Audio("yes.wav");
var no = new Audio("no.wav");

var haslo1 = "";

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

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

window.onload = start;

var litery = new Array(35);

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<=34; i++)
	{
		var element = "lit" + i;
		tresc_diva = tresc_diva + '<div class=" litera " onclick="sprawdz('+i+')" id=" '+element+' ">'+litery[i]+'</div>';
		if ((i+1) % 7 ==0) tresc_diva = tresc_diva + '<div style="clear:both;"></div>';
	}
	
	document.getElementById("alfabet").innerHTML = tresc_diva;
	
	
	wypisz_haslo();
}

String.prototype.ustawZnak = function(miejsce, znak)
{
	if (miejsce > this.length - 1) return this.toString();
	else return this.substr(0, miejsce) + znak + this.substr(miejsce+1);
}


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)
	{
		yes.play();
		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
	{
		no.play();
		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",";");		
		
		//skucha
		ile_skuch++;
		var obraz = "img/s"+ ile_skuch + ".jpg";
		document.getElementById("szubienica").innerHTML = '<img src=" '+obraz+' " alt=" " />';
	}
	
	//wygrana
	if (haslo == haslo1)
	document.getElementById("alfabet").innerHTML  = "Tak jest! Podano prawidłowe hasło: "+haslo+'<br /><br /><span class="reset" onclick="location.reload()">JESZCZE RAZ?</span>';
	
	//przegrana
	if (ile_skuch>=9)
	document.getElementById("alfabet").innerHTML  = "Przegrana! Prawidłowe hasło: "+haslo+'<br /><br /><span class="reset" onclick="location.reload()">JESZCZE RAZ?</span>';
}

 

Comments

Sprawdź czy prawidłowo podpiąłeś JS i CSS do HTML. Zobacz, czy w konsoli nie ma błędów (uruchom ją po wejściu na stronę i obserwuj podczas gdy będziesz klikał w literki).

Answer 1

Porównywałem mój kod linia w linię z kodem Mirosława i wszystko jest identyczne.

Nie ucz się tak programowania. :v 

 

Kodu nie analizowałem, ale skoro skrypt jest identyczny jak Zelanta, to może jest problem z plikiem css? Może tam zrobiłeś jakiś błąd?   

Comments

plik html i css też porównałem i nie ma żadnych błędów, naprawdę nie wiem o co tu chodzi

---

Na różnych przeglądarkach sprawdzałeś? Bo nie sądzę, że Mirosław mógł dać nie działający kod. Błąd pewnie leży po Twojej stronie.

---

właśnie chodzi o to że kod Mirosława działa, tylko mój nie, mimo że są identyczne, nawet podpiąłem Jego kod, zamiast swojego i wtedy działa, ale oba skrypty są kropka w kropkę takie same

---

Kolega Ci napisał, żebyś się na tym nie wzorował. W programowaniu nie chodzi o to, żeby zrobić milion zmiennych globalnych i kod działa.

Answer 2

Zajrzałem do konsoli błędów i problem leży w ostatniej pętli, mianowicie tam, gdzie określa się styl literek. W konsoli widnieje taki komunikat: "wisielec.js:108 Uncaught TypeError: Cannot read property 'style' of null." Usunąłem te dwie sekcje ze stylem css i wtedy normalnie zmienia się tło i odkrywa hasło, no tylko że literki nie zmieniają koloru na zielony i czerwony. Skopiowałem tą część kodu od Mirosława i również pojawia się ten błąd. Ma ktoś jakieś pomysły o co może tu chodzić? Gdy zajrzałem do konsoli błędów w stronie do Mirosława to wszystko było ok.

Comments

Ehh dobra, poddaję się. Pewnie mam jakiegoś wirusa na komputerze czy cuś i dlatego tak się dzieje. Podmieniałem fragmenty kodu Mirka na mój i sprawdzałem w której części skrypt przestaje działać. Najpierw podmieniłem górną, a potem dolną połowę i okazało się że to w tej drugiej tkwi problem. Wtedy dzieliłem ją na coraz mniejsze, aż w końcu podmieniałem same linijki, aż zaczął działać. Potem podstawiałem po kolei spowrotem swój kod i wtedy działało idealnie, jakby nigdy nic (tak zapisywałem zmiany w programie). Później znowu dałem Mirka i swój, tylko że teraz zamieniałem większymi fragmentami i znowu nie działał. Tak jak wspominałem wcześniej, kod mój i Mirka jest identyczny, nawet program to potwierdził, więc niemożliwe żeby mój nie działał. Może po prostu mam jakiegoś wirusa czy coś.

---

var element = "lit" + nr; 
document.getElementById(element) // error

po prostu element, do którego się odwołujesz nie istnieje… wrzuć paczkę z kodem do jakiegoś archiwum i zahostuj, żebym mógł pobrać i zobaczyć kod

---

Dobra, jednak mój błąd. Wszystko działa. Zbadałem element w przeglądarce i okazało się że miałem spację w ID, dlatego nie działało. Tyle zachodu bez jedną spację. Sory za zamieszanie i dzięki wszystkim za pomoc.

Answer 3

Coś co można zautomatyzować choćby i w pętli nie powinno się pisać ręcznie za każdym razem. Tak na szybko, lepiej zainicjuj tablicę litery w jednej linii. Funkcje są za długie, zwłaszcza ostatnia.