Need help on solving error stopping it from running well

// By late Bloomer in code
// html code
<!DOCTYPE html>
<html>



    <head>
        <link rel="stylesheet" href="style.css">
        
    
    </head>
    
    
    <body>
        <h1 id="title">BLACK JACK</h1>
        <h4> By LateBloomerToCodes </h4>
        <br>
        
        <p id="text-area"> Welcome to Black Jack </p>
        <button id="new-game-button"> New Game! </button>
        <button id="hit-button"> Hit! </button>
        <button id="stay-button"> Stay! </button>
    
    <script src="script.js"></script>
    </body>

</html>

//Card Variables
let suits = ["Hearts", "Clubs", "Diamonds", "Spades"];
let values = ["Ace", "King", "Queen", "Jack",
             "Ten", "Nine", "Eight", "Seven", 
              "Six", "Five", "Four", "Three",
              "Two"];


//DOM variables
let textArea = document.getElementById("text-area");
    newGameButton = document.getElementById("new-game-button");
    hitButton = document.getElementById("hit-button");
    stayButton = document.getElementById("stay-button");

//Game variables
let gameStarted = false,
    gameOver = false,
    playerWon = false,
    dealerCards = [],
    playerCards = [],
    dealerScore = 0,
    playerScore = 0,
    deck = [];
    
hitButton.style.display = "none";
stayButton.style.display = "none";
showStatus();

newGameButton.addEventListener("click" , function() {
    gameStarted = true;
    gameOver = false;
    playerWon = false;
    
    deck = createDeck();
    ShuffleDeck(deck);
    dealerCards = [getNextCard(),getNextCard()];
    playerCards = [getNextCard(),getNextCard()];
    
    newGameButton.style.display = "none";
    hitButton.style.display = "inline";
    stayButton.style.display = "inline";
    showStatus();
});

function createDeck () {
    let deck = [];
    for ( let suitIdx = 0; suitIdx < suits.length; suitIdx++) {
        for (let valueIdx = 0; valueIdx < values.length; valueIdx++){
            let card = {
                suit: suits[suitIdx],
                value: values[valueIdx]
            };
        deck.push(card);
        }
    }
    return deck;
}  

function ShuffleDeck(deck) {
    for (let i = 0; i < deck.length; i++){
        let swapIdx = Math.trunc(Math.random() * deck.length);
        let tmp = deck[swapIdx];
        deck[swapIdx] = deck[i];
        deck[i] = tmp; 
    }
}

function getCardString(card) {
    return card.value + " of " + card.suit;
}

function getNextCard(){
    return deck.shift();
}

function showStatus() {
    if (!gameStarted) {
        textArea.innerText = "Welcome To Blackjack!";
        return;
    } 
    for (var i = 0; i < deck.length; i++) {
        textArea.innerText += "\n" + getCardString(deck[i]);
    }
}

//let deck = createDeck();


 

//let playerCards = [getNextCard(), getNextCard()];

console.log("You Are Welcome To BlackJack");

console.log("You Are Dealt: ");
console.log(" " + getCardString(playerCards[0]) );
console.log(" " + getCardString(playerCards[1]) );```

Hello @sheriffsalam.

It’s difficult to see where the error is since it gives me errors because I don’t have your HTML. I suggest you upload your project to a web like codepen and give us the link to help you.

@sheriffsalam Your code calls a function named getCardString(playerCards[0]) in the second to last console.log statement in your code. The problem is, the array playerCards does not have any elements in it, so trying to reference an element at index 0 returns undefined. Then in your getCardString function you refer to a property named value (card.value) but undefined values do not have properties.

To resolve these issues, you need to do two things:

  1. You need to make a call to the createDeck function and assign the value returned to deck.

  2. You need to modify your commented line below so you assigned two card elements to the playerCards array.

//let playerCards = [getNextCard(), getNextCard()];