遺漏的類型錯誤：無法讀取的不確定

財產「排名」我剛開始學習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

遺漏的類型錯誤：無法讀取的不確定

回答

相關問題