JavaScript中console.log正常但textContent无法生效的问题

我尝试在JavaScript中将变量输出到对应的HTML页面，console.log可以显示预期的值，但不知为何.textContent（甚至.innerText）无法正常工作。相关代码如下：

JS代码 #

let firstCard = 6
let secondCard = 14
let sum = firstCard + secondCard
let hasBlackJack = false
let isAlive = true
let message = ""
let messageEl = document.getElementById("message-el")
// let sumEl = document.getElementById("sum-el")
let sumEl = document.querySelector("#sum-el") //querySelector - getElement with ID(#) sum-el
console.log(sumEl)

function startGame() {
  sumEl.textcontent = sum
  console.log(sumEl.textcontent)
  if (sum <= 20) {
    message = "Do you want to draw a new card?"
    messageEl.textcontent = message
  } else if (sum === 21) {
    message = "You have got blackjack"
    hasBlackJack = true
  } else {
    message = "You are out of the game"
    isAlive = false
  }
}

HTML代码 #

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="index.css">
  <title></title>
</head>

<body>
  <h1>BlackJack</h1>
  <p id="message-el">Want to play a round?</p>
  <p>Cards: </p>
  <p id="sum-el">Sum: </p>
  <button onclick="startGame()">Start Game</button>
  <script src="index.js"></script>
</body>

</html>

核心问题是JavaScript的大小写敏感性：你把DOM元素的内置属性textContent写成了全小写的textcontent，这是拼写错误。

JavaScript中属性名严格区分大小写，textcontent不是内置属性，你其实是给元素添加了一个自定义属性，所以页面不会更新，但console.log能输出你赋值的内容（因为这个自定义属性确实存在）。

修正后的JS代码 #

let firstCard = 6
let secondCard = 14
let sum = firstCard + secondCard
let hasBlackJack = false
let isAlive = true
let message = ""
let messageEl = document.getElementById("message-el")
let sumEl = document.querySelector("#sum-el")

function startGame() {
  sumEl.textContent = `Sum: ${sum}` // 修正大小写，同时保留原文本前缀
  console.log(sumEl.textContent)
  if (sum <= 20) {
    message = "Do you want to draw a new card?"
    messageEl.textContent = message // 修正大小写
  } else if (sum === 21) {
    message = "You have got blackjack"
    messageEl.textContent = message // 补充更新提示文本的逻辑
    hasBlackJack = true
  } else {
    message = "You are out of the game"
    messageEl.textContent = message // 补充更新提示文本的逻辑
    isAlive = false
  }
}

额外优化说明 #

1. 原代码中sum ===21和sum>21的分支没有更新messageEl，修正后补充了这部分逻辑，确保所有场景下提示文本都能正常变化。
2. 更新sumEl时保留了原HTML中的"Sum: "前缀，避免替换后只显示数字，更符合页面原本的布局。

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