Access DOM on JavaScript

Question

I'm trying to get the textContent of a a tag inside an ul tags. The problem is that when I access the console returns me "null" instead of the element. I don't know what I am doing wrong. Hope you ca help me and thanks.

HTML code

JS code

On other hand, the console returns me HTMLColletion but I can't get anything from there because I don't know the syntax to get the things from there, all I get is "undefined".

<div class="dropdown">
         <ul class="navbar-nav mr-auto ">

            <li class="nav-item">
                <a id="resumen" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"> Productos 0 | Precio 0€ </a>
                <ul id="productos" class="dropdown-menu">


                </ul>

            </li>

         </ul>
</div>

The JS:

var resumen2 = document.getElementsByClassName("nav-link dropdown-toggle");
var resumen =  document.getElementById("resumen");
console.log(resumen);
console.log(resumen2.textContent);

document.getElementById("resumen").textContent? You don't need to grab the elements by class and the element by id if the element with the id is the one you want. — Andy
– Andy, Commented Oct 14, 2018 at 11:21

Steven Spungin · Accepted Answer · 2018-10-14 11:11:11Z

1

Put your script tag at the end of the body, or add a defer attribute to it.

answered Oct 14, 2018 at 11:11

Steven Spungin

29.5k7 gold badges97 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Darwin Gonzalez Over a year ago

Thank you so much Steven Spungin, appreciated.

Steven Spungin Over a year ago

You did not show the script tag in your example. Did this solve the problem?

Darwin Gonzalez Over a year ago

Yes, well you solve it, thank you. Only was need it to put the script tag on html on the bottom.

Quentin · Accepted Answer · 2018-10-14 11:14:34Z

0

This is because getElementsByClassName returns a NodeList object, not an Element object.

Use resumen2[0].textContent to get the content of your element.

var resumen2 = document.getElementsByClassName("nav-link dropdown-toggle");
var resumen =  document.getElementById("resumen");
console.log(resumen);
console.log(resumen2[0].textContent);

<div class="dropdown">
         <ul class="navbar-nav mr-auto ">

            <li class="nav-item">
                <a id="resumen" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"> Productos 0 | Precio 0€ </a>
                <ul id="productos" class="dropdown-menu">


                </ul>

            </li>

         </ul>
</div>

answered Oct 14, 2018 at 11:14

Quentin

3,2991 gold badge17 silver badges33 bronze badges

Comments

Tarek Essam · Accepted Answer · 2018-10-14 11:15:19Z

0

document.getElementByClassName return a node list.

<div class="dropdown">
         <ul class="navbar-nav mr-auto ">

            <li class="nav-item">
                <a id="resumen" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"> Productos 0 | Precio 0€ </a>
                <ul id="productos" class="dropdown-menu">


                </ul>

            </li>

         </ul>
</div>
<script>
var resumen2 = document.getElementsByClassName("nav-link dropdown-toggle")[0];
var resumen =  document.getElementById("resumen");
console.log('resumen',resumen);
console.log('resumen2.textContent', resumen2.textContent);
</script>

answered Oct 14, 2018 at 11:15

Tarek Essam

4,0602 gold badges15 silver badges21 bronze badges

Comments

Sivaprakash D · Accepted Answer · 2018-10-14 11:15:22Z

0

Please check the below domo,

https://jsfiddle.net/jf60754y/

HTML Code:

  <html>
    <head>
    <title>Get a tag text</title>
    <body>
     <a id="gettext" href="#">hellow Mr shiva</a>
    </body>
    </html>

JS Code:

<script type="text/javascript">
document.getElementById('gettext').innerHTML
</script>

As per you js code,

innerHTML not available folowwed by the document.getElementById('resumen')

answered Oct 14, 2018 at 11:15

Sivaprakash D

3281 gold badge4 silver badges17 bronze badges

Collectives™ on Stack Overflow

Access DOM on JavaScript

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related