Search code examples
javascripthtmljquery-selectors

Why is my document.querySelector() returning a [object HTMLDivElement] instead of the value?

I have the value 60% stored inside a <div class="value-container"> 60% </div>, however when use this query function document.querySelector(.value-container) to get the value, I get this response instead: [object HTMLDivElement]

Find below my HTML code:

<body>

    <div class="container">
        <div class="circular-progress">
            <div class="value-container"> 60% </div>
        </div>
    </div>

    <script>
        $(document).ready(function(){
            let testing = document.querySelector('.value-container');
            console.log("Testing: " +testing);
        });            
    </script>

</body>

This code above yields:

Testing: [object HTMLDivElement]

The desired yield is:

Testing: 60%

How do I capture the value stored inside my <div class="value-container"> 60% </div>?

Solution

  • The other commenters are correct - you need do something with the object you get back from your querySelector.

    But if you only care about the raw text (which it looks like in this case as you just want the 60% value), then document.querySelector('.value-container').textContent is slightly more efficient than innerHTML