title: Loop to remove card from player's hand not working
body: <p>I'm working on  a card game. It has a <code>playerHand</code> array which consists of 7 card objects with the properties <code>Value</code> <code>suit</code> and <code>cardName</code>. These are rendered on the screen as 7 divs with the shared class <code>.card</code> and unique classes that match the corresponding <code>cardName</code> e.g. <code>.six_hearts</code> <code>.ace_spades</code></p>
  <p>When a card div is clicked on, it receives the class <code>.selected</code>. The Div's <code>classList</code> is then pushed into an array entitled <code>SelectedCardsImg</code>.</p>
  <p>What I'm trying to do is to remove the corresponding card object from the <code>playerHand</code> array and push it into a new array entitled <code>selectedCards</code>.</p>
  <pre><code>let selectedCardsImg = [];
  let selectedCards = [];
  
      //loop through array of card images
      for (var i = 0; i &lt; selectedCardsImg.length; i++) {
  
        //loop through playerHand array (card objects)
        for (var x = 0; x &lt; playerHand.length; x++) {
  
          //if the current card image classlist contains the current card objects name
          if (selectedCardsImg[i].contains(playerHand[x].cardName)) {
  
            //push it into the new array selectedCards
            selectedCards.push(playerHand[x]);
  
            //remove it from the playerHand array
            playerHand.shift(playerHand[x]);
        }
      }
    }
  </code></pre>
  <p>Okay so I found a solution, instead of trying to do it all in one loop I wrote two loops. One that push's the card into the <code>selectedCards</code> array:</p>
  <pre><code>    for (var i = 0; i &lt; playerHand.length; i++) {
          let currentCard = playerHand[i];
          let currentCardName = playerHand[i].cardName;
  
          for (var x = 0; x &lt; selectedCardsImg.length; x++) {
          let result = selectedCardsImg[x].contains(currentCardName);
  
              if (result) {
      
                  selectedCards.push(currentCard);
              } 
          }
      }
  </code></pre>
  <p>and then the second loop compares the <code>selectedCards</code> array to the <code>playerHand</code> array and removes the matches from <code>playerHand</code>:</p>
  <pre><code>      for (var i = 0; i &lt; selectedCards.length; i++) {
      
         console.log(selectedCards[i]);
  
         for (var x = 0; x &lt; playerHand.length; x++) {
  
              if (selectedCards[i] === playerHand[x]) {
                  playerHand.splice(x, 1);
                  console.log(playerHand);
                  console.log(selectedCards)
              } 
         }
  
          
      }
  </code></pre>