黑杰克游戏分数仅控制台可见不显示在页面，showScore函数失效问题

问题修复方案 #

核心错误点 #

• 传参不匹配：blackjackHit函数调用showScore时传入了2个参数card和YOU，但showScore仅定义了1个入参，导致函数拿到的activePlayer实际是卡牌值而非玩家对象，无法读取对应属性
• 语法错误：JS内置对象document首字母不能大写，代码中使用了中文全角单引号‘’而非英文半角单引号''，会导致选择器识别失败
• 函数未闭合：showScore函数缺少结束的}
• 补充：你提供的HTML代码也存在语法错误，标签属性引号未闭合、标签书写错误，会导致DOM节点无法被正常选中：
  • div的class属性未闭合引号和尖括号
  • id="losses"、id="draws"缺少闭合的引号
  • 展示draws的span标签内多了多余的<符号

修正后的代码 #

修正后的JS代码

function blackjackHit() {
  let card = randomCard();
  console.log(card);
  showCard(card, YOU);
  updateScore(card, YOU);
  // 去掉多余的card参数，仅传入玩家对象
  showScore(YOU);
}

function showScore(activePlayer) {
  // document首字母小写，替换为英文单引号
  document.querySelector(activePlayer['scoreSpan']).textContent = activePlayer['score'];
}
// 额外注意：需确保你定义的YOU对象里的scoreSpan属性值和对应span的id匹配，比如展示玩家分数的span id为'your-score'的话，YOU.scoreSpan应为'#your-score'

修正后的HTML代码

<div class="flex-blackjack-row-3">
  <table>
    <tr>
      <th>Wins</th>
      <th>Losses</th>
      <th>Draws</th>
    </tr>
    <tr>
      <td><span id="wins">0</span></td>
      <td><span id="losses">0</span></td>
      <td><span id="draws">0</span></td>
    </tr>
  </table>
</div>
<!-- 额外补充：如果你是要展示玩家/庄家的实时对局分数，需要额外添加对应id的span节点，和YOU、DEALER对象里的scoreSpan属性对应即可 -->

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