JavaScript I am trying to make a blackjack game that shows scores responsively, but I can't get it to work factoring in the Ace

[pc510]

I have made a few blackjack tutorials, and I am now trying to build my own. I want the game to be responsive and show players' scores in real time, but I can't figure out what to do about the Ace. The code that I currently have doesn't reduce the Ace to 1 in the HTML file when the player goes over 21.

The problem seems to be when there is a bust involving an Ace. For example, I just got an 8, 9, A, and 5. My total (variable yourSum)

Should cause a bust and the game should end. However, my HTML div for my sum showsYour Cards: 13.

Thus, the yourSum variable is not taking into consideration the bust. Can anyone explain why or how I can fix this?


JS

let dealerSum = 0;
let yourSum = 0;
let dealerAceCount = 0;
let yourAceCount = 0;
let hidden;
let deck;
let canHit = true;
const playAgainEl = document.getElementById('play-again')

document.getElementById('hit').addEventListener('click', hit);
document.getElementById('stay').addEventListener('click', stay);

window.onload = function() {
    buildDeck();
    shuffleDeck();
    startGame();
}


const buildDeck = () => {
    let values = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"]
    let types = ["C", "D", "H", "S"]
    deck = [];
    for (let i = 0; i < types.length; i++) {
        for (let j = 0; j < values.length; j++) {
            deck.push(values[j] + '-' + types[i]);
        }
    }
}

const shuffleDeck = () => {
    for (let i = 0; i < deck.length; i++) {
        let j = Math.floor(Math.random() * deck.length);
        let temp = deck[i];
        deck[i] = deck[j];
        deck[j] = temp;
    }
    console.log(deck);
}

const startGame = () => {
    hidden = deck.pop();
    dealerSum += getValue(hidden);
    dealerAceCount += checkAce(hidden);
    let cardImg = document.createElement('img');
    let card = deck.pop();
    cardImg.src = './cards/' + card + '.png';
    dealerSum += getValue(card);
    dealerAceCount += checkAce(card);
    document.getElementById('dealer-cards').append(cardImg);
    document.getElementById('dealer-sum').innerText = getValue(card);


    for (let i = 0; i < 2; i++) {
        let cardImg = document.createElement('img');
        let card = deck.pop();
        cardImg.src = './cards/' + card + '.png';
        yourSum += getValue(card);
        yourAceCount += checkAce(card);
        document.getElementById('your-cards').append(cardImg);
    }
    document.getElementById('your-sum').innerText = (yourSum);


const getValue = (card) => { 
    let data = card.split('-');
    let value = data[0];
    if (isNaN(value)) {
        if (value == "A") {
            return 11;
        }
        return 10;
    }
    return parseInt(value);
}

function checkAce(card) {
    if (card[0] == "A") {
        return 1;
    }
    return 0;
}
function reduceAce(playerSum, playerAceCount) {
    while (playerSum > 21 && playerAceCount > 0) {
        playerSum -= 10;
        playerAceCount -= 1;
    }
    return playerSum;
}


function hit() {
    if (!canHit) {
        return;
    }
    let cardImg = document.createElement("img");
    let card = deck.pop();
    cardImg.src = "./cards/" + card + ".png";
    yourSum += getValue(card);
    yourAceCount += checkAce(card);
    document.getElementById("your-cards").append(cardImg);
    showScore();
    if (reduceAce(yourSum, yourAceCount) > 21) { //A, J, 8 -> 1 + 10 + 8
        canHit = false;
        showScore();
        stay();
    }






function stay() {
    dealerSum = reduceAce(dealerSum, dealerAceCount);
    yourSum = reduceAce(yourSum, yourAceCount);
    canHit = false;
    document.getElementById('hidden').src = './cards/' + hidden + '.png';

    if (dealerSum < 17 && yourSum <= 21 && yourSum > dealerSum) {
        let cardImg = document.createElement('img');
        let card = deck.pop();
        cardImg.src = './cards/' + card + '.png';
        dealerSum += getValue(card);
        dealerAceCount += checkAce(card);
        document.getElementById('dealer-sum').innerText = dealerSum;
        document.getElementById('dealer-cards').append(cardImg);

        if (dealerSum < 17 && yourSum <= 21) {
            let cardImg = document.createElement('img');
            let card = deck.pop();
            cardImg.src = './cards/' + card + '.png';
            dealerSum += getValue(card);
            dealerAceCount += checkAce(card);
            console.log(dealerSum + ' : dealersum currently is.... ')
            document.getElementById('dealer-sum').innerText = dealerSum;
            document.getElementById('dealer-cards').append(cardImg);
        }
    }
    let message = '';
    if (yourSum > 21) {
        message = 'You Lose. You bust.';
    }
    else if (dealerSum > 21) {
        message = 'You win. Dealer busts.'
    }
    else if (yourSum == dealerSum) {
        message = 'Tie.'
    }
    else if (yourSum > dealerSum) {
        message = 'You win. Higher than dealer.'
    }
    else if (yourSum < dealerSum) {
        message = 'You lose. Lower than dealer.'
    }
    document.getElementById('dealer-sum').innerText = dealerSum;
    document.getElementById('your-sum').innerText = yourSum;
    document.getElementById('results').innerText = message;
    playAgainEl.style.display = 'block';
    document.getElementById('play-again-btn').addEventListener('click', newGame);
}

function newGame() {
    window.location.reload();
}

function showScore() {
    yourSum = yourSum;
    yourSum = reduceAce(yourSum, yourAceCount);
    document.getElementById('your-sum').innerText = (yourSum);
}
}

 

[BlackCube]

showScore() subtracts the ace.
stay() subtracts the same ace again.