I'm working on a card game and for the most part its working out. It shuffles, and divides the deck into two (1st 26cards to player 1, the other half to player 2). My problem is when a player wins they are supposed to gain a card from the other player's hand. (player1Cards.push(player2Cards[card])) - This works, but because of the setup of the game every time you click play the entire game resets.

Is there a way I can make it so once the card gets pushed it stays within the winners array without refreshing every time?

I tried putting my shuffle for loop in a function, but then it wont read any of my variables.

```js
function start() {  

    //Deck with ranks:

    let starterDeck = [
        {"img": '2_of_clubs.png',"rank": 1},{"img": '3_of_clubs.png',"rank": 2},{"img": '4_of_clubs.png',"rank": 3},{"img": '5_of_clubs.png',"rank": 4},{"img": '6_of_clubs.png',"rank": 5},{"img": '7_of_clubs.png',"rank": 6},{"img": '8_of_clubs.png',"rank": 7},{"img": '9_of_clubs.png',"rank": 8},{"img": '10_of_clubs.png',"rank": 9},{"img": 'jack_of_clubs.png',"rank": 10},{"img": 'queen_of_clubs.png',"rank": 11},{"img": 'king_of_clubs.png',"rank": 12},{"img": 'ace_of_clubs.png',"rank": 13},    {"img": '2_of_diamonds.png',"rank": 1},{"img": '3_of_diamonds.png',"rank": 2},{"img": '4_of_diamonds.png',"rank": 3},{"img": '5_of_diamonds.png',"rank": 4},{"img": '6_of_diamonds.png',"rank": 5},{"img": '7_of_diamonds.png',"rank": 6},{"img": '8_of_diamonds.png',"rank": 7},{"img": '9_of_diamonds.png',"rank": 8},{"img": '10_of_diamonds.png',"rank": 9},{"img": 'jack_of_diamonds.png',"rank": 10},{"img": 'queen_of_diamonds.png',"rank": 11},{"img": 'king_of_diamonds.png',"rank": 12},{"img": 'ace_of_diamonds.png',"rank": 13},    {"img": '2_of_hearts.png',"rank": 1},{"img": '3_of_hearts.png',"rank": 2},{"img": '4_of_hearts.png',"rank": 3},{"img": '5_of_hearts.png',"rank": 4},{"img": '6_of_hearts.png',"rank": 5},{"img": '7_of_hearts.png',"rank": 6},{"img": '8_of_hearts.png',"rank": 7},{"img": '9_of_hearts.png',"rank": 8},{"img": '10_of_hearts.png',"rank": 9},{"img": 'jack_of_hearts.png',"rank": 10},{"img": 'queen_of_hearts.png',"rank": 11},{"img": 'king_of_hearts.png',"rank": 12},{"img": 'ace_of_hearts.png',"rank": 13},    {"img": '2_of_spades.png',"rank": 1},{"img": '3_of_spades.png',"rank": 2},{"img": '4_of_spades.png',"rank": 3},{"img": '5_of_spades.png',"rank": 4},{"img": '6_of_spades.png',"rank": 5},{"img": '7_of_spades.png',"rank": 6},{"img": '8_of_spades.png',"rank": 7},{"img": '9_of_spades.png',"rank": 8},{"img": '10_of_spades.png',"rank": 9},{"img": 'jack_of_spades.png',"rank": 10},{"img": 'queen_of_spades.png',"rank": 11},{"img": 'king_of_spades.png',"rank": 12},{"img": 'ace_of_spades.png',"rank": 13},
       ]

    //Shuffled Our Deck:
           for(let i=0;i<52; i++) {
            // We are taking our tempCard and placing it in the random position (randomIndex)
                    let shuffledCards = starterDeck[i];
                    let randomIndex = Math.floor(Math.random() * 52);
                    starterDeck[i] = starterDeck[randomIndex]
                    starterDeck[randomIndex] = shuffledCards;
                }
            //console.log(starterDeck)

    //Make it random out of the 26 cards received by players:
    let card = Math.floor(Math.random() * 26)

    //Player 1 gets the first 26 cards from the random shuffled deck. 
    let player1Cards = starterDeck.splice(26)

    //Place the image
      let selectedCardImg = [player1Cards[card].img]
      document.getElementById('p1Card').src = "./images/cards/" + selectedCardImg

      //Player 2 gets the last 26 cards from the random shuffled deck. 
      let player2Cards = starterDeck.splice(-26)

      //console.log(player2Cards)
      console.log('PLAYER 1 CARD')
      console.log(player1Cards[card])

      console.log('PLAYER 2 CARD')
      console.log(player2Cards[card])

      //Place the image
      let selectedCardImg2 = [player2Cards[card].img]
      document.getElementById('p2Card').src = "./images/cards/" + selectedCardImg2

      if (player1Cards[card].rank < player2Cards[card].rank){
        //alert("Player 2 Wins")
        player2Cards.push(player1Cards[card])
        console.log(player2Cards)
    } else if (player1Cards[card].rank > player2Cards[card].rank){

       // alert("Player 1 wins")
       player1Cards.push(player2Cards[card])
       console.log(player1Cards)
    } else {
       // alert("TIE!")
       console.log('Tie!');

    }

}

```

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>War</title>
</head>
<body>
    <div> Game</div>
    <img src="./images/cards/black_joker.png" height="300px" id="p1Card">
    <img src="./images/cards/red_joker.png" height="300px" id="p2Card">

    <input type="text" readonly id="player1Score"/>
    <input type="text" readonly id="player2Score"/>
    <button onclick = "start()">play me</button>  

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="./js/index.js"></script>
</body>
</html>
```