Javascript textContent和innerHtml在函数内部不起作用

我只想在函数中更改段落的文本，但在我的例子中它不起作用

虽然当我记录这一点时，它显示的元素内部的值已更改，但旧值是textContent

问题涉及最后一个名为drawCard的函数

以下是托管在github上的页面和代码：

'use strict';

let money = 500;
let playerBet = 0 ;
let playerScore = 0;
let dealerScore = 0;

// #######################################
// #######################################
// BET

// Bet amount 
const addBetAmount = document.querySelectorAll('.bet-amount');
const sumBetAmountBox = document.querySelector('.player-bet');
const placeBet = document.querySelector('.bet-btn');
const betBox = document.querySelector('.bet');
const customBet = document.querySelector('.custom-bet-amount');

for (const betAmount of addBetAmount){
    betAmount.addEventListener('click',() => {
        if(playerBet<money){
            if(betAmount.textContent === "All in")
                playerBet = money;
            else{
                if (playerBet + Number(betAmount.textContent) > money)
                    playerBet = money;
                else 
                    playerBet += Number(betAmount.textContent);
            }
            sumBetAmountBox.textContent = playerBet;
        }
    })
}

// Place bet
const menuFront = document.querySelector('.menu__side--front');
const menuBack = document.querySelector('.menu__side--back');
const placedBetBox = document.querySelector('.placed-bet');


placeBet.addEventListener('click',() =>{
    if (playerBet){
        betBox.textContent = playerBet;
        placedBetBox.classList.toggle('hidden');
        let audio = new Audio('img/drop.mp3');
        audio.play();

        playerBet = 0;
        sumBetAmountBox.textContent = playerBet;
        
        // draw cards
        drawCard('player',playerScore);
        // drawCard('dealer',dealerScore);
        // drawCard('player',playerScore);
        setTimeout(drawCard.bind(null,'dealer',dealerScore),2000);
        setTimeout(drawCard.bind(null,'player',playerScore),2000);

        // switch menu
        menuFront.classList.add('swipe-front');
        menuBack.classList.add('swipe-back');
    }
    else alert('In order to play you have to place a bet')
    
})

// Custom bet value
customBet.addEventListener('blur',() => {
    if (customBet.value > 0){
        if (customBet.value > money)
            playerBet = money;
        else
            playerBet = customBet.value;
        sumBetAmountBox.textContent = playerBet;
    }
    else alert('Bet must be greater than 0')
})

// Clear bet
const clearBtn = document.querySelector('.clear');

clearBtn.addEventListener('click', () => {
    playerBet = 0 ;
    sumBetAmountBox.textContent = playerBet;
    customBet.value = ''
})


// #######################################
// #######################################
// Draw cards

const playerCardsBox = document.querySelector('.player-cards');
const dealerCardsBox = document.querySelector('.dealer-cards');

let playerScoreBox = document.querySelector('.player-score');
let dealerScoreBox = document.querySelector('.dealer-score');

const drawCard = (currentPlayer,score) => {
    const values = [2,3,4,5,6,7,8,9,10,'J','Q','K','A'];
    const suits = ['C','D','H','S'];

    const randomValuesIndex = Math.floor(Math.random() * values.length);
    const randomSuitsIndex = Math.floor(Math.random() * suits.length);

    const drawnValue = values[randomValuesIndex];
    const drawnSuit = suits[randomSuitsIndex];

    if (typeof drawnValue == 'number'){
        score += drawnValue;
    }

    else {
        // TODO exception 
        score += 10;
    }
    if (currentPlayer == 'player'){
        playerCardsBox.innerHTML += `<img src="img/${drawnValue+drawnSuit}.png" alt="card" class="card slide-in">`
        playerScoreBox.innerHTML = "15"; // -> doesn't update text !!!!!
        playerScore = score;
       
    }
        
    else{
        console.log(dealerScoreBox,dealerScoreBox.textContent);
        dealerCardsBox.innerHTML += `<img src="img/${drawnValue+drawnSuit}.png" alt="card">`
        dealerScoreBox.textContent = "5"; // -> doesn't update text !!!!!
        dealerScore = score;
    }
    console.log(dealerScoreBox,dealerScoreBox.textContent); // -> result:  element, "5" !!!!!
} 
playerScoreBox.innerHTML = "77"; // -> works fine !!!!

---

我想你一打电话

playerCardsBox.innerHTML += 

元素被重新创建，因此变量playerScoreBox指向一个不再存在的元素。 你可以试着研究一下

document.querySelector('.player-score').innerHTML = "15";

---

所有这些代码，包括广泛的CSS，真的需要证明这个问题吗？谢谢，它现在工作，因为我想，但仍然idk为什么它不会与变量一点点工作weird@fluffy如果通过修改字符串更改html目录，javascript将无法跟踪更改并再次解析整个节点。重新创建，变量指向不再存在的。

playerCardsBox.innerHTML += 

document.querySelector('.player-score').innerHTML = "15";