probleem met div id

Status
Niet open voor verdere reacties.
D

diskdok

Gebruiker
Lid geworden
27 mei 2007
Berichten
5
Hallo!

Ik ben bezig met memory-game in javascript en zit nu vast

dit is het probleem:

Na het aanklikken van bijvoorbeeld de div met id=5, wordt de functie "Omdraaien" aangeroepen.
Vervolgens wordt voor de divs met id 0 t/m 4 ook deze functie aangeroepen, terwijl dit NIET de bedoeling is!!
Hopelijk weet iemand raad!

<head>
<script>

//! nummers voor de kaartjes
var omgedraaideKaartjes=0;
var aantalBeurten=0;
var cards = new Array(0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8);
var idArray = new Array(2);
var aantalTerugGedraaid=0;
var score=0;
var matchArray= new Array(16);
var x=0;

function Omdraaien(id) {
alert("in omdraaien");
omgedraaideKaartjes++
//alert(omgedraaideKaartjes);
if(omgedraaideKaartjes<=2){
getalKaartje=cards[id];


hetKaartje=document.getElementById(id);
hetKaartje.firstChild.data=getalKaartje;


if (omgedraaideKaartjes==1){
idArray[0]=id;
getalKaartje1=getalKaartje;
}
if (omgedraaideKaartjes==2){
idArray[1]=id;
aantalBeurten++
getalKaartje2=getalKaartje;
//Memory(getalKaartje1,getalKaartje2);
}



}

}

function Memory(getalKaartje1,getalKaartje2){

if (getalKaartje1!= getalKaartje2){
alert("geen match!");
Terugdraaien()
}
else {
alert("een match!");
Match();

}
}

//terug draaien van de kaartjes, terugzetten van de variable omgedraaide kaartjes
function Terugdraaien(){



for (loop=0; loop<=1; loop++){
//alert("terugdraaien")
hetOmtedraaienKaartje=document.getElementById(idArray[loop]);
hetOmtedraaienKaartje.firstChild.data="";

}
alert("nu");
//omgedraaideKaartjes=0;
}

function Match(){
score++;
//kaarten doen niet meer mee in het spel
matchArray[x++]=idArray[0];
matchArray[x++]=idArray[1];

}


</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style>
.kaartje {
background-color:#009966;
position:fixed;
width:50px;
height:50px}
</style>



</head>

<body>

<DIV ID="0" STYLE="left:20px;top:20px;" CLASS="kaartje" ONCLICK=Omdraaien("0")>
<DIV ID="1" STYLE="left:80px;top:20px;" CLASS="kaartje" ONCLICK=Omdraaien("1")>
<DIV ID="2" STYLE="left:140px;top:20px;" CLASS="kaartje" ONCLICK=Omdraaien("2")>
<DIV ID="3" STYLE="left:200px;top:20px;" CLASS="kaartje" ONCLICK=Omdraaien("3")>
<DIV ID="4" STYLE="left:20px;top:80px;" CLASS="kaartje" ONCLICK=Omdraaien("4")>
<DIV ID="5" DIV STYLE="left:80px;top:80px" CLASS="kaartje" ONCLICK=Omdraaien("5")>
<DIV ID="6" DIV STYLE="left:140px;top:80px" CLASS="kaartje" ONCLICK=Omdraaien("6")>
<DIV ID="7" DIV STYLE="left:200px;top:80px" CLASS="kaartje" ONCLICK=Omdraaien("7")>
<DIV ID="8" DIV STYLE="left:20px;top:140px" CLASS="kaartje" ONCLICK=Omdraaien("8")>
<DIV ID="9" DIV STYLE="left:80px;top:140px" CLASS="kaartje" ONCLICK=Omdraaien("9")>
<DIV ID="10" DIV STYLE="left:140px;top:140px" CLASS="kaartje" ONCLICK=Omdraaien("10")>
<DIV ID="11" DIV STYLE="left:200px;top:140px" CLASS="kaartje" ONCLICK=Omdraaien("11")>
<DIV ID="12" DIV STYLE="left:20px;top:200px" CLASS="kaartje" ONCLICK=Omdraaien("12")>
<DIV ID="13" DIV STYLE="left:80px;top:200px" CLASS="kaartje" ONCLICK=Omdraaien("13")>
<DIV ID="14 "DIV STYLE="left:140px;top:200px" CLASS="kaartje" ONCLICK=Omdraaien("14")>
<DIV ID="15" DIV STYLE="left:200px;top:200px" CLASS="kaartje" ONCLICK=Omdraaien("15")>

</body>
</html>
 
@diskdok ,

Je opent wel div's maar je sluit ze niet ergens af !!
dus <div blablabla> </div>
zo zijn ze genest ... Is dat de bedoeling ??

Ik zie ook wel wat vreemds vanaf div 5 ; nogmaals div in de <div > ??

helpt dit ??? gr, wim
 
De div's waren idd niet afgesloten. :)

Ik heb ook nog de style aangepast, .innerHTML gebruikt en nog een paar kleine dingetjes aan het script aangepast:
PHP: 
<html>
<head>
<script>

//! nummers voor de kaartjes
var omgedraaideKaartjes=0;
var aantalBeurten=0;
var cards = new Array(0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8);
var idArray = new Array(2);
var aantalTerugGedraaid=0;
var score=0;
var matchArray= new Array(16);
var x=0;

function Omdraaien(id) {
alert("in omdraaien");
omgedraaideKaartjes++
//alert(omgedraaideKaartjes);
if(omgedraaideKaartjes<=2){
getalKaartje=cards[id];


hetKaartje=document.getElementById(id);
hetKaartje.innerHTML= '&nbsp;' + getalKaartje;


if (omgedraaideKaartjes==1){
idArray[0]=id;
getalKaartje1=getalKaartje;
}
if (omgedraaideKaartjes==2){
idArray[1]=id;
aantalBeurten++
getalKaartje2=getalKaartje;
Memory(getalKaartje1,getalKaartje2);
}



}

}

function Memory(getalKaartje1,getalKaartje2){

if (getalKaartje1!= getalKaartje2){
alert("geen match!");
Terugdraaien()
}
else {
alert("een match!");
Match();

}
}

//terug draaien van de kaartjes, terugzetten van de variable omgedraaide kaartjes
function Terugdraaien(){



for (loop=0; loop<=1; loop++){
//alert("terugdraaien") 
hetOmtedraaienKaartje=document.getElementById(idArray[loop]);
hetOmtedraaienKaartje.innerHTML="";

}
alert("nu");
omgedraaideKaartjes=0;
}

function Match(){
score++;
//kaarten doen niet meer mee in het spel
matchArray[x++]=idArray[0];
matchArray[x++]=idArray[1];
omgedraaideKaartjes=0;
}


</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style>
.kaartje {
cursor: pointer;
background-color: #096;
color: #fff;
font: bold 32px/50px 'Verdana'; 
position: absolute;
width: 50px;
height: 50px;
}
</style>



</head>

<body>

<div id="0" style="left:20px;top:20px;" class="kaartje" onclick=Omdraaien("0")></div>
<div id="1" style="left:80px;top:20px;" class="kaartje" onclick=Omdraaien("1")></div>
<div id="2" style="left:140px;top:20px;" class="kaartje" onclick=Omdraaien("2")></div>
<div id="3" style="left:200px;top:20px;" class="kaartje" onclick=Omdraaien("3")></div>
<div id="4" style="left:20px;top:80px;" class="kaartje" onclick=Omdraaien("4")></div>
<div id="5" style="left:80px;top:80px" class="kaartje" onclick=Omdraaien("5")></div>
<div id="6" style="left:140px;top:80px" class="kaartje" onclick=Omdraaien("6")></div>
<div id="7" style="left:200px;top:80px" class="kaartje" onclick=Omdraaien("7")></div>
<div id="8" style="left:20px;top:140px" class="kaartje" onclick=Omdraaien("8")></div>
<div id="9" style="left:80px;top:140px" class="kaartje" onclick=Omdraaien("9")></div>
<div id="10" style="left:140px;top:140px" class="kaartje" onclick=Omdraaien("10")></div>
<div id="11" style="left:200px;top:140px" class="kaartje" onclick=Omdraaien("11")></div>
<div id="12" style="left:20px;top:200px" class="kaartje" onclick=Omdraaien("12")></div>
<div id="13" style="left:80px;top:200px" class="kaartje" onclick=Omdraaien("13")></div>
<div id="14" style="left:140px;top:200px" class="kaartje" onclick=Omdraaien("14")></div>
<div id="15" style="left:200px;top:200px" class="kaartje" onclick=Omdraaien("15")></div>

</body>
</html>
Daar kom je vast verder mee. :)


Vr.Gr. Egel.
 
Bedankt Egel en wadelft!, dat heeft zeker geholpen :). nu kan ik weer even vooruit.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan