Resetting the visibility of "startButtonGame" is the only problem; everything else works fine

Question

I am developing a blackjack game. So far, everything is working fine except this small detail. Basically, the start game button should only be visible before the game and after the game. I have no problem setting it to hidden, but when I finish a game it doesn't work.

function startGame() {
    startGameButton.style.visibility = "hidden";
    if (!player.playerName) {
        player.playerName = prompt("你叫什么名字？")
        player.chips = 100

        playerEl.textContent = "玩家：" + player.playerName;
    }

    if (cards.length < 2) {
        let bet = prompt('你想下注多少（筹码：' + player.chips + '）')
        player.chips = player.chips - bet;
        chipsEl.textContent = "筹码：" + player.chips;
    }

    let firstCard = randomCard();
    let secondCard = randomCard();
    cards = [firstCard, secondCard];
    let tableFirstCard = randomCard();
    let tableSecondCard = randomCard();
    tableCards = [tableFirstCard, tableSecondCard];
    let message = "";
    let hasBlackJack = false;
    let isAlive = true;

    sum = firstCard + secondCard;
    newCardButton.style.visibility = "visible";
    startGameButton.textContent = "新游戏";

    if (sum < 21) {
        message = "你想要抽一张新牌吗？";
    } else if (sum === 21) {
        message = "你得到了21点！";
        newCardButton.style.visibility = "hidden";
        startGameButton.style.visibility = "visible";
        player.chips = player.chips + bet * 2
        hasBlackJack = true;
    } else {
        startGameButton.style.visibility = "visible";
        isAlive = false;
        message = "运气不好！你已经离开游戏了！";
    }

    messageEl.textContent = message;
    cardsEl.textContent = "牌：" + firstCard + " " + secondCard;
    tableCardsEl.textContent = "桌面牌：" + tableSecondCard + " " + tableSecondCard;
    sumEl.textContent = "总和：" + sum;
    console.log("21点：" + hasBlackJack);
    console.log("存活：" + isAlive);
}

I even tried swapping the order to see if it made any difference, but all that happens is:

if (sum < 21) {
        message = "你想要抽一张新牌吗？";
    } else if (sum === 21) {
        message = "你得到了21点！";
        newCardButton.style.visibility = "hidden";
        startGameButton.style.visibility = "visible";
        player.chips = player.chips + bet * 2
        hasBlackJack = true;
    } else {
        startGameButton.style.visibility = "visible";
        isAlive = false;
        message = "运气不好！你已经离开游戏了！";
    }

Everything in the if statement is happening except the visibility part.

If you need more context, please refer to the code link: https://github.com/pedrosilva410/blackjack-game

Answer 1

I've looked at the entire code on your Github, and the problem is that your startGame function is only called when the game first starts (which makes sense, obviously). It does nothing while the game is in progress.

Your instructions about making the "Start Game" button visible are correct, you just have them in the wrong place. Add them to your drawCard function as well.

function drawCard() {

    if (hasBlackJack == false || isAlive == true) {
        let newCard = randomCard();
        let newTableCard = randomCard();
        sum = sum + newCard

        if (sum < 21) {
            message = "你想要抽一张新牌吗？";
        } else if (sum === 21) {
            message = "你得到了21点！";
            newCardButton.style.visibility = "hidden";
            startGameButton.style.visibility = "visible";
            hasBlackJack = true;
        } else {
            isAlive = false;
            message = "运气不好！你已经出局了！";
            startGameButton.style.visibility = "visible";
            newCardButton.style.visibility = "hidden"
        }

        messageEl.textContent = message;
        cardsEl.textContent = cardsEl.textContent + " " + newCard;
        tableCardsEl.textContent = tableCardsEl.textContent + " " + newTableCard;
        sumEl.textContent = "总和: " + sum;
        console.log("黑杰克: " + hasBlackJack);
        console.log("还活着: " + isAlive);
    }
}