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?

Well, how about `let calcDisplayVal = document.getElementById("calc-display-val").innerHTML`? — mutantkeyboard, May 18 '22 at 11:26
You are logging the HTML element itself. What you probably want is to return the text content for it (eg: innerHTML, innerText and textContent). See above comment for the example, that should work. — Joao Jesus, May 18 '22 at 11:31
Does this answer your question? [How can get the text of a div tag using only javascript (no jQuery)](https://stackoverflow.com/questions/10370204/how-can-get-the-text-of-a-div-tag-using-only-javascript-no-jquery) — tevemadar, May 18 '22 at 11:31

score 1 · Accepted Answer · edited May 18 '22 at 12:15

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>

edited May 18 '22 at 12:15

pilchard

answered May 18 '22 at 11:29

Sumit Sharma

Simone Mantovani · Answer 2 · 2022-05-18T11:49:42.180

0

If you need only the print of your div's content:

console.log(document.getElementById("calc-display-val").innerHTML)

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

edited May 18 '22 at 11:49

answered May 18 '22 at 11:45

Simone Mantovani

2 Answers2