I'm currently working on a school exercice and I can't find how to do one thing.
So I have this :
when I click on one for the case, the image is supposed to display but the problem is that I only get the name of it. I would like to know what I have to change to be able to show the pics instead of the name.
Please, let me know what I should change in my code, I'm a beginner. Thank you very much!
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://ift.tt/mOIMeg">
<html xmlns="http://ift.tt/lH0Osb">
<head>
<style type="text/css">
/*<![CDATA[*/
div#memory_board{
background:#B0C4DE;
border:#999 1px solid;
width:580px;
height:580px;
padding:0px;
margin:45px auto;
}
div#memory_board > div{
background: url(images/memoryBg.png) no-repeat;
border:none;
width:71px;
height:71px;
float:left;
margin:35px;
padding:0px;
font-size:30px;
cursor:pointer;
text-align:center;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var user = prompt ("Benutzername eingeben und zum Starten auf OK klicken!");
console.log("Willkommen " + user + "!");
document.write ("Willkommen " + user + "!");
var memory_array = [document.getElementById('url(images/card1.png) no-repeat'),document.getElementById('url(images/card1.png) no-repeat'),document.getElementById('card2'),document.getElementById('card2'),document.getElementById('card3')document.getElementById('card3')document.getElementById('card4')document.getElementById('card4')document.getElementById('card5')document.getElementById('card5')document.getElementById('card6')document.getElementById('card6')document.getElementById('card7')document.getElementById('card7')document.getElementById('card8')document.getElementById('card8')];
var memory_values = [];
var memory_tile_ids = [];
var tiles_flipped = 0;
Array.prototype.memory_tile_shuffle = 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 newBoard(){
tiles_flipped = 0;
var output = '';
memory_array.memory_tile_shuffle();
for(var i = 0; i < memory_array.length; i++){
output += '<div id="tile_'+i+'" onclick="memoryFlipTile(this,\''+memory_array[i]+'\')"><\/div>';
}
document.getElementById('memory_board').innerHTML = output;
}
function memoryFlipTile(tile,val){
if(tile.innerHTML == "" && memory_values.length < 2){
tile.style.background = '#FFF';
tile.innerHTML = val;
if(memory_values.length == 0){
memory_values.push(val);
memory_tile_ids.push(tile.id);
} else if(memory_values.length == 1){
memory_values.push(val);
memory_tile_ids.push(tile.id);
if(memory_values[0] == memory_values[1]){
tiles_flipped += 2;
// Clear both arrays
memory_values = [];
memory_tile_ids = [];
// Check to see if the whole board is cleared
if(tiles_flipped == memory_array.length){
alert("Toll gemacht! Neues Spielfeld wird generiert. Um fortzufahren, klicken Sie auf OK");
document.getElementById('memory_board').innerHTML = "";
newBoard();
}
} else {
function flip2Back(){
// Flip the 2 tiles back over
var tile_1 = document.getElementById(memory_tile_ids[0]);
var tile_2 = document.getElementById(memory_tile_ids[1]);
tile_1.style.background = 'url(images/memoryBg.png) no-repeat';
tile_1.innerHTML = "";
tile_2.style.background = 'url(images/memoryBg.png) no-repeat';
tile_2.innerHTML = "";
// Clear both arrays
memory_values = [];
memory_tile_ids = [];
}
setTimeout(flip2Back, 700);
}
}
}
}
//]]>
</script>
<title></title>
</head>
<body>
<div id="memory_board"></div><script type="text/javascript">
//<![CDATA[
newBoard();
//]]>
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire