javascript - this.setAttribute 不是函数

Question

我试图让卡片在匹配游戏中从后到前翻转，但我遇到了控制台错误，我不确定为什么会发生这种情况: 在 checkForMatch (main.js:27) 在 HTMLImageElement.flipCard (main.js:37)

请查看我的代码并告诉我您看到了什么。附:这是我正在做的学校课前作业，所以我不是 100% 熟悉某些术语，但通常可以理解人们想说的内容。谢谢

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.cardImage));
if (cardsInPlay.length === 2 && cardsInPlay[0] === cardsInPlay[1]){
    alert("You found a match!");
} else {
        alert("Sorry, try again");
    }
}

var flipCard = function(){
    var cardId = this.getAttribute('data-id');
    checkForMatch();
    console.log("User flipped " + cards.rank);
    cardsInPlay.push(cards.rank);
    console.log(cards.cardImage);
    console.log(cards.suit);
}

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();

Answer 1

要解决上下文问题，您可以将 Update checkForMatch() 替换为 checkForMatch.bind(this)(); 但您的代码中似乎还存在另一个问题在 checkForMath 内，第 ► this.setAttribute('src', (cards.cardImage)); 行未指定您想要从中获取图像的数组的索引。

我的猜测是您想要传递 cardId，类似于此 ► checkForMatch.bind(this)(cardId);

看来您的控制台日志也没有指定索引，并且可能也应该使用 cardId ► console.log(cards[cardId].cardImage);和 console.log(cards[cardId].suit);

I made all the changes below in a working example. As the images are random for demonstration purpose and to sow actual images, use the corrected console output for to see everything working correctly.

document.addEventListener("DOMContentLoaded", function(event) {


  var cards = [{
    rank: "queen",
    suit: "hearts",
    cardImage: "http://lorempixel.com/25/25/animals/"
  }, {
    rank: "queen",
    suit: "diamonds",
    cardImage: "http://lorempixel.com/25/25/animals/"
  }, {
    rank: "king",
    suit: "hearts",
    cardImage: "http://lorempixel.com/25/25/animals/"
  }, {
    rank: "king",
    suit: "diamonds",
    cardImage: "http://lorempixel.com/25/25/animals/"
  }];

  var cardsInPlay = [];

  var checkForMatch = function(cardId) {
    this.setAttribute('src', cards[cardId].cardImage);
    if (cardsInPlay.length === 2 && cardsInPlay[0] === cardsInPlay[1]) {
      alert("You found a match!");
    } else {
      alert("Sorry, try again");
    }
  }

  var flipCard = function() {
    var cardId = this.getAttribute('data-id');
    checkForMatch.bind(this)(cardId);
    console.log("User flipped " + cards[cardId].rank);
    cardsInPlay.push(cards.rank);
    console.log(cards[cardId].cardImage);
    console.log(cards[cardId].suit);
  }

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

  createBoard();
});

img{
padding: 2px;
}

<div id="game-board"></div>