移除showCards初始化语句后卡牌重复显示的问题求助

核心原因 #

问题出在内容追加而非重置：每次调用renderGame()时，你直接用+=往showCards.textContent里加内容，但没有先清空之前已渲染的卡片文本，导致旧内容被保留，新内容直接叠加，最终出现重复。

详细过程拆解 #

1. 首次点击「Start Game」：
   • cards数组为[10,4]，showCards初始为空，循环后showCards.textContent变为"10 4 "
2. 点击「New Card」：
   • cards数组新增元素1，变为[10,4,1]，再次调用renderGame()
   • 此时未重置showCards内容，直接执行showCards.textContent += cards[i] + " "，相当于在原有"10 4 "基础上，再把整个cards数组的元素（10、4、1）追加一遍，最终显示"10 4 10 4 1 "

为什么加上showCards.textContent = 'Cards: '就正常？ #

这行代码会先清空并重置showCards的内容，把旧文本全部替换成"Cards: "，之后再循环追加当前cards数组的元素，每次渲染都从干净状态开始，自然不会出现重复。

修复方案 #

可以根据需求选择以下方式：

• 方案1（推荐，保留标签文本）：
  在循环前保留重置代码：

  function renderGame(){
    showCards.textContent = 'Cards: ' // 关键重置行
    for (let i  = 0; i<cards.length; i++){
      showCards.textContent += cards[i] + " "
    }
    // ... 其他逻辑代码
  }
  

• 方案2（不需要前缀时）：
  先清空内容再追加：

  function renderGame(){
    showCards.textContent = '' // 清空原有内容
    for (let i  = 0; i<cards.length; i++){
      showCards.textContent += cards[i] + " "
    }
    // ... 其他逻辑代码
  }
  

完整修复后代码参考 #

HTML部分：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <h1 id="message-el">Want to play?</h1>
        <p id="cards-el"></p>
        <p id="sum-el"></p>
        <button onclick="startGame()">Start Game</button>
        <button onclick="newCard()">New Card</button>
        <script src="abc.js" defer></script>
    </body>
</html>

JavaScript部分：

let firstCard  = 10
let secondCard = 4
let cards =  [firstCard,secondCard]
let sum = firstCard + secondCard
let isAlive = true;
let blackJack = false;
let msg = ''
let showMsg = document.getElementById('message-el')
let showCards = document.getElementById('cards-el')
let showSum  = document.getElementById('sum-el')

function startGame(){
    renderGame()
}

function renderGame(){
    showCards.textContent = 'Cards: '
    for (let i  = 0; i<cards.length; i++){
        showCards.textContent += cards[i] + " "
    }

    showSum.innerText = "Sum:" + sum; 

    if(sum <= 20){
        msg = 'Draw a new card?'
    }else if(sum ===  21){
        msg = 'BlackJack!'
        blackJack= true
    }else{
        msg='Lose'
        isAlive = false
    }

    showMsg.innerText = msg;
}

function newCard(){
    let card = 1;
    sum += card
    cards.push(card)
    console.log(cards)
    renderGame()
}

内容的提问来源于stack exchange，提问作者MarNavuu