Question

enter image description here我收到了Uncaught TypeError，无法弄清楚为什么..该属性已定义并试图删除“ [cardId]”，但它也无法正常工作。 flipCard功能。

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()
{
    this.setAttribute('src',cards[cardId].cardImage);
    if (cardsInPlay.length === 2)
    {
        if (cardsInPlay[0] === cardsInPlay[1])
        {
            alert("You found a match!!");
        }
        else
        {
            alert("Sorry, try again");
        }
    }
}
var flipCard = function()
{
    var cardId = this.getAttribute('data-id');
    console.log("User flipped " + cards[cardId].rank);
    cardsInPlay.push(cards[cardId].rank);
    console.log(cards[cardId].cardImage);
    console.log(cards[cardId].suit);
    checkForMatch();
}


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

当我单击该卡片时，应该将其打开并显示国王或王后。

Answer 1

因此您正在使用this.getAttribute，但是在此上下文中不存在。我猜您需要通过事件目标。但是我不确定您如何调用此函数。我只是在黑暗中拍照，但我认为这可以解决问题

var flipCard = function(event) {
  const element = event.target;
  var cardId = element.getAttribute('data-id');

  console.log("User flipped " + cards[cardId].rank);
  cardsInPlay.push(cards[cardId].rank);
  console.log(cards[cardId].cardImage);
  console.log(cards[cardId].suit);
  checkForMatch();
}

因此，如果您的卡片元素看起来像<div class="card" data-id="card_1"> Card 1</div>

您可以附加事件侦听器来调用flipCard

const card = document.querySelector('.card');
card.addEventListener('click', flipCard);

Answer 2

我在createBoard函数和flipCard函数中做了很少的更改..现在它可以按预期的方式工作..这是在chagnes之后的代码

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 numberOfGames = 0;
var numberOfwins = 0;
var numberOfLosts =0;
var checkForMatch = function()
{
    if (cardsInPlay.length === 2)
    {
        if (cardsInPlay[0] === cardsInPlay[1])
        {
            alert("You found a match!!");
        }
        else
        {
            alert("Sorry, try again");
        }
    }
}
var flipCard = function()
{
    var cardId = this.getAttribute('data-id');
    console.log("User flipped " + cards[cardId].rank);
    cardsInPlay.push(cards[cardId].rank);
    console.log(cards[cardId].cardImage);
    console.log(cards[cardId].suit);
    this.setAttribute('src',cards[cardId].cardImage);
    checkForMatch();
}


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

我的js代码给我一个错误，即使我的对象中存在“属性未定义”

2 个答案: