遗漏的类型错误：无法读取的不确定

财产“排名”我刚开始学习javascipt的，在这个错误的教程中间很为难：遗漏的类型错误：无法读取的不确定

我试图创造各种各样的小游戏，我翻转卡和查找匹配。

我有一个数组中的对象，并试图根据选择哪个卡（对象）来调用'rank'的特定值。

在控制台中运行代码给我一个错误：未捕获TypeError：无法读取未定义的属性'等级'。

的Javascript：

console.log("Up and running"); 

var cards = [ 
{ 
    rank: "queen", 
    suit: "hearts", 
    cardImage: "images/queen-of-hearts.png" 
}, 
{ 
    rank: "queen", 
    suit: "diamonds", 
    cardImage: "images/queen-of-diamonds.png" 
}, 
{ 
    rank: "king", 
    suit: "hearts", 
    cardImage: "images/king-of-hearts.png" 
}, 
{ 
    rank: "king", 
    suit: "diamonds", 
    cardImage: "images/king-of-diamonds.png" 
} 
]; 
var cardsInPlay = []; 

var checkForMatch = function() { 
    if (cardsInPlay[0] === cardsInPlay[1]) { 
     alert("You found a match!"); 
    } else alert("Sorry, try again"); 
} 
var flipCard = function(cardId) { 
    console.log("User flipped " + cards[cardId].rank); 
    /*issue is with calling the rank*/ 
    console.log(cards[cardId].cardImage); 
    console.log(cards[cardId].suit); 
    cardsInPlay.push(cards[cardId].rank); 
    if (cardsInPlay.length === 2) { 
     checkForMatch(); 
    }; 
} 

var createBoard = function() { 
    for (var i = 0; i < cards.length; i ++) { 
     var cardElement = document.createElement('img'); 
     cardElement.setAttribute("img", "images/back.png"); 
     cardElement.setAttribute("data-id", i); 
     cardElement.addEventListener("click", flipCard()); 
     document.getElementById("game-board").appendChild(cardElement); 
    } 
} 
createBoard(); 

flipCard(0); 
flipCard(2);

是我的错误是由于我把银行卡使用[CardId中] .rank从对象价值的方式？

来源

2017-04-20 Rebecca Tay

活页片功能需要一个CardId中的参数，当你调用上单击事件'flipcard'你不传递任何参数，它是不确定的。 – Gntem

您必须通过函数参考addEventListener（使用正确参数调用flipCard的函数）。然后你就会有这样的problem，你可以解决这样的：

var createBoard = function() { 
    for (var i = 0; i < cards.length; i ++) { 
     var cardElement = document.createElement('img'); 
     cardElement.setAttribute("img", "images/back.png"); 
     cardElement.setAttribute("data-id", i); 

     // ############################################# 

     (function(index) { 
      cardElement.addEventListener("click", function() { 
       flipCard(index); 
      }); 
     })(i); 

     // ############################################# 

     document.getElementById("game-board").appendChild(cardElement); 
    } 
}

或使用forEach代替for这让事情变得简单了很多：

var createBoard = function() { 
    cards.forEach(function(card, i) { 
     var cardElement = document.createElement('img'); 
     cardElement.setAttribute("img", "images/back.png"); 
     cardElement.setAttribute("data-id", i); 

     // no need to wrap this in an immediately invoked function expression (as this whole code is wrapped in the callback of forEach) 
     cardElement.addEventListener("click", function() { 
      flipCard(i); 
     }); 

     document.getElementById("game-board").appendChild(cardElement); 
    } 
}

来源

2017-04-20 09:31:10

尝试改变

cardElement.addEventListener("click", flipCard());

到

cardElement.addEventListener("click", function(){ flipCard(i); });

更新开始

到

cardElement.addEventListener("click", flipCard.bind(null, i));

，以避免在评论

提到closuring情况下

更新的最终

说明：调用addEventListener时，第二个参数必须是一个函数，但是你通过功能flipCard的号召的结果，它返回undefined。

代码中的另一个错误，就是你怎么称呼它不带参数，而它预计cardId作为参数，当它没有得到它，它需要未定义元素从cards阵列

来源

2017-04-20 09:25:39 jevgenig

不要忘记这一点：http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example！ –

只需更新

cardElement.addEventListener("click", flipCard());

去

cardElement.addEventListener("click", function(e){ flipCard(e.target.dataset.id); });

来源

2017-04-20 10:29:52

遗漏的类型错误：无法读取的不确定

回答

相关问题