获取变量在javascript中是未定义的，即使使用全局变量也是如此_Javascript_Variables_Undefined

获取变量在javascript中是未定义的，即使使用全局变量也是如此

javascript variables

获取变量在javascript中是未定义的，即使使用全局变量也是如此,javascript,variables,undefined,Javascript,Variables,Undefined,我正在尝试做一个记忆游戏，在这个游戏中，用户将有一个计时器来找出这对卡在哪里。现在这是基本的，没有计时器，没有随机分配的卡，我只是想让引擎运行，现在我被卡在点击事件部分。我现在想做的就是通过javascript将CSS转换应用到点击的卡片上，我也愿意接受关于更好方法的建议 HTML文件 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&g

我正在尝试做一个记忆游戏，在这个游戏中，用户将有一个计时器来找出这对卡在哪里。现在这是基本的，没有计时器，没有随机分配的卡，我只是想让引擎运行，现在我被卡在点击事件部分。我现在想做的就是通过javascript将CSS转换应用到点击的卡片上，我也愿意接受关于更好方法的建议

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>

尝试将cartas声明移动到第一个for循环之后

    for ( i = 0 ; i < 6 ; i++ ) {
        var carta = document.createElement('div');
        var front = document.createElement('div');
        var back = 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');

（i=0；i<6；i++）的

{
var carta=document.createElement（'div'）；
var front=document.createElement（'div'）；
var back=document.createElement（'div'）；
carta.className=“carta”；
front.className=“front”；
back.className=“back”；
文件.正文.附件（carta）；
儿童手推车（前）；
儿童手推车（背）；
//var rand=Math.floor（Math.random（）*simbolos.length）；
front.innerHTML=simbolos[i]；
}
var cartas=document.getElementsByClassName（'carta'）；

您当前的代码试图获取尚未创建的carta元素（在创建和附加它们之前），这就是为什么它未定义的原因。确切地说，“这（相当字面上）是解决方案：）

var simbolos=[“O”，“X”，“+”，“O”，“X”，“+”]；
var jogo={
criarCartas:function（）{
对于（i=0；i<6；i++）{
var carta=document.createElement（'div'）；
var front=document.createElement（'div'）；
var back=document.createElement（'div'）；
carta.className=“carta”；
front.className=“front”；
back.className=“back”；
文件.正文.附件（carta）；
儿童手推车（前）；
儿童手推车（背）；
//var rand=Math.floor（Math.random（）*simbolos.length）；
front.innerHTML=simbolos[i]；
}
jogo.clicks（）；
},
单击：函数（）{
var cartas=document.getElementsByClassName（'carta'）；
对于（j=0；j

您的js试图在创建carta类之前抓取它，尝试在第一个for循环之后移动cartas声明除非您没有向我们展示整个HTML，否则，

cartas[j]

未定义是完全正常的<但是，code>cartas是空的，不是未定义的。创建此变量时，不存在具有类名的div

carta

。您需要在创建div之后创建变量（即在第一个

for

循环之后）

body {
    font-family: verdana;
}

/* vai ser usado para efeitos hover */
.carta {
    float: left;
    width: 120px;
    height: 180px;
    margin: 10px 10px;
}
/* affect all elmenents with class front and back inside all elements with class carta */
.carta > .front, .back {
    font-size: 80px;
    line-height: 90px;
    text-align: center;
    cursor: pointer;
}

/* define a 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;
}

/* a 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;
}

    for ( i = 0 ; i < 6 ; i++ ) {
        var carta = document.createElement('div');
        var front = document.createElement('div');
        var back = 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');

var simbolos = ["O","X","+","O","X","+"];
var jogo = {
    criarCartas: function () {  
        for ( i = 0 ; i < 6 ; i++ ) {
            var carta = document.createElement('div');
            var front = document.createElement('div');
            var back = 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];
        }
        jogo.clicks();
    },
    clicks: function () {
        var cartas = document.getElementsByClassName('carta');
        for ( j = 0 ; j < cartas.length ; j++ ) {
            cartas[j].onclick = function () {
              this.childNodes[0].style.transform = (this.childNodes[0].style.transform != "rotateY(0deg)") ? "rotateY(0deg)" : "rotateY(180deg)";
              this.childNodes[1].style.transform = (this.childNodes[1].style.transform != "rotateY(180deg)") ? "rotateY(180deg)" : "rotateY(0deg)";
            };
        };
    }
};