[SOLVED] console.log() works but "textcontent" is not working

console.log() works but "textcontent" is not working - JavaScript

I am trying to output a variable in JS to the respective HTML page. Console.log shows the desired value but for some reason, .textContent (or even .innerText) is not working.

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
  }

}

<!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>

Solution

it's very common in javascript to have camel case variable/function names. The issue is that textcontent should be textContent. in your example, it should be:

messageEl.textContent=message

https://developer.mozilla.org/ is a great resource for learning Html and Js.