javascript - this.setAttribute不是函数

我正在尝试让纸牌在匹配游戏中从后翻到前，但是遇到控制台错误，我不确定为什么会这样：
    在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();

最佳答案

要解决上下文问题，您可以将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);


  我在一个工作示例中进行了以下所有更改。由于图像是
  随机用于演示和播种实际图像，请使用
  更正了控制台输出，以查看一切正常工作。

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>

关于javascript - this.setAttribute不是函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42584264/