pomoc z kodem - wyświetlanie obrazków zamiast numerów

0

Co mogę zrobić, aby po kliknięciu nie wyświetlała się cyfra tylko obrazek 1.jpg-8.jpg


<!DOCTYPE html>
<html>
<head>
<style>
div#tarcza{
	
	
	width:416px;
	height:416px;
	
	
}
div#tarcza > div{
	background: url(0.jpg) no-repeat;
	
	width:102px;
	height:102px;
	float:left;
	
	
	cursor:pointer;
	
}
</style>
<script>

//var klocki = ['1.jpg','1.jpg','2.jpg','2.jpg','3.jpg','3.jpg','4.jpg','4.jpg','5.jpg','5.jpg','6.jpg','6.jpg','7.jpg','7.jpg','8.jpg','8.jpg',];
    
    var klocki = ['1','1','2','2','3','3','4','4','5','5','6','6','7','7','8','8',];
    
var wartosci = [];
var karty = [];
var obrocone = 0;
Array.prototype.mieszacz = function(){
    var i = this.length, j, temp;
    while(--i > 0){
        j = Math.floor(Math.random() * (i+1));
        temp = this[j];
        this[j] = this[i];
        this[i] = temp;
    }
}
function tablica(){
	obrocone = 0;
	var output = '';
    klocki.mieszacz();
	for(var i = 0; i < klocki.length; i++){
		output += '<div id="tile_'+i+'" onclick="obracacz(this,\''+klocki[i]+'\')"></div>';
	}
	document.getElementById('tarcza').innerHTML = output;
}
function obracacz(tile,val){
	if(tile.innerHTML == "" && wartosci.length < 2){
		tile.style.background = '#FFF';
		tile.innerHTML = val;
		if(wartosci.length == 0){
			wartosci.push(val);
			karty.push(tile.id);
		} else if(wartosci.length == 1){
			wartosci.push(val);
			karty.push(tile.id);
			if(wartosci[0] == wartosci[1]){
				obrocone += 2;
				
				wartosci = [];
            	karty = [];
				
				if(obrocone == klocki.length){
					alert("koniec gry");
					document.getElementById('tarcza').innerHTML = "";
					tablica();
				}
			} else {
				function brak_pary(){
				   
				    var pole_1 = document.getElementById(karty[0]);
				    var pole_2 = document.getElementById(karty[1]);
				    pole_1.style.background = 'url(0.jpg) no-repeat';
            	    pole_1.innerHTML = "";
				    pole_2.style.background = 'url(0.jpg) no-repeat';
            	    pole_2.innerHTML = "";
				    
				    wartosci = [];
            	    karty = [];
				}
				setTimeout(brak_pary, 500);
			}
		}
	}
}
</script>
</head>
<body>
<div id="tarcza"></div>
<script>tablica();</script>
</body>
</html>

0

wydaje mi się, iż problem leży tutaj

output += '<div id="tile_'+i+'" onclick="obracacz(this,\''+klocki[i]+'\')"></div>';

1 użytkowników online, w tym zalogowanych: 0, gości: 1