getting variable is undefined in javascript even with global variables -
i'm trying memory game user have timer find out pair of cards. right basic gets, no timer, no random distribution of cards, i'm trying engine running , right i'm getting stuck in click event section. want right apply css transform via javascript clicked card, i'm open suggestions on improve ways this
the html
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>memória</title> <link rel="stylesheet" href="style.css" /> </head> <body> <h1>cartas memória</h1> <script src="script.js"></script> </body> </html> js (checkout lastly loop)
// memoria // criar array de simbolos 3 simbolos~repetidos 2 vezes var simbolos = ["o","x","+","o","x","+"]; var jogo = { criarcartas: function () { var cartas = document.getelementsbyclassname('carta'); ( = 0 ; < 6 ; i++ ) { var carta = document.createelement('div'); var front end = document.createelement('div'); var = document.createelement('div'); carta.classname = "carta"; front.classname = "front"; back.classname = "back"; document.body.appendchild(carta); carta.appendchild(front); carta.appendchild(back); //var rand = math.floor(math.random() * simbolos.length); front.innerhtml = simbolos[i]; } ( j = 0 ; j < cartas.length ; j++ ) { cartas[j].onclick = function () { // cartas[j] undefined in here, global variables or using this.cartas[j] }; } } }; // eventos window.onload = function () { jogo.criarcartas(); }; css
body { font-family: verdana; } /* vai ser usado para efeitos hover */ .carta { float: left; width: 120px; height: 180px; margin: 10px 10px; } /* impact elmenents class front end , within elements class carta */ .carta > .front, .back { font-size: 80px; line-height: 90px; text-align: center; cursor: pointer; } /* define posição inicial da carta*/ .front { border: 1px solid black; position: absolute; width: 120px; height: 180px; background-color: #ffff99; transform: rotatey(180deg); perspective: 400px; transition: 1s ease; backface-visibility: hidden; } /* traseira ja esta virada 180 graus */ .back { border: 1px solid black; position: absolute; width: 120px; height: 180px; background-color: #ff66cc; transform: rotatey(0deg); perspective: 400px; transition: 1s ease; backface-visibility: hidden; }
try moving cartas declaration after first loop
( = 0 ; < 6 ; i++ ) { var carta = document.createelement('div'); var front end = document.createelement('div'); var = document.createelement('div'); carta.classname = "carta"; front.classname = "front"; back.classname = "back"; document.body.appendchild(carta); carta.appendchild(front); carta.appendchild(back); //var rand = math.floor(math.random() * simbolos.length); front.innerhtml = simbolos[i]; } var cartas = document.getelementsbyclassname('carta'); your current code trying grab carta elements (before created , appended) have not yet been created why undefined
javascript variables undefined
No comments:
Post a Comment