<!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>
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:'如果我删除这一行，当我按下新卡而不是10 4 1时，我的代码将打印在屏幕10 4 10 4 1上，我不明白为什么
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()
}
很抱歉有这么多代码，但我真的想把它弄清楚并理解的逻辑
如果我删除这一行，当我按下新卡而不是10 4 1时，我的代码将打印在屏幕10 4 10 4 1上，我不明白为什么
showCards.textContent = 'Cards: '的初始化很重要，因为它会删除以前显示的卡片。
这是必要的，因为接下来的循环将迭代所有发牌，并将它们添加到showCards.textContent输出中——所有。因此，如果textContent已经有了上一轮的一些卡，它们将被复制。