document.getElementById returns HTMLDivElement {}

Question

I have the following code in my HTML file:

    <div id="calc-parent">
    <div class="row">
    <div class="column" id="calc-display-val">0</div>
    </div>

I need to get the value of calc-display-val, so I have the following JavaScript code:

let calcDisplayVal = document.getElementById("calc-display-val")

function pressOne() {
console.log(calcDisplayVal)
}

But instead of 0, I get "HTMLDivElement {}"

How can I get the value of calc-display-val?

Answer 1

You can use .innerHTML for this :

let calcDisplayVal = document.getElementById("calc-display-val")

function pressOne() {
  console.log(calcDisplayVal.innerHTML)
}

pressOne()

<div id="calc-parent">
    <div class="row">
    <div class="column" id="calc-display-val">0</div>
</div>