title: this.setAttribute is not a function
body: <p>I am trying to get cards to flip over from back to front in a matching game and I am having trouble I am getting a console error and I am not sure why this is happening:
      at checkForMatch (main.js:27)
      at HTMLImageElement.flipCard (main.js:37)</p>
  
  <p>Please look over my code and let me know what you see.
  P.S. this is a pre course assignment for school that I am doing so I am not 100% familiar with some terms, but usually can understand what people are trying to say.
  Thanks</p>
  
  <pre><code>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 &amp;&amp; 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 &lt; 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();
  </code></pre>