How do you get the inner text inside these classes with javascript?

Question

I have

<div class="ce">
  <div class="lotB">9</div>
  <div class="lotB">3</div>
  <div class="lotB">28</div> == $0
</div>

I'm trying to get these three numbers 9, 3, 28 but I can't get this to work :s

Already tried several different things and I also read about innerText and tried to get it work by going through the class ce like that

var x = document.getElementsByClassName("ce");
for (var i = 0; i < x.length; i++) {
  var numbers = x[i].innerText;
  alert(numbers);
}

But also this didn't give me anything : /

How do you get this inner text of each these classes, so I got the numbers 9, 3, 28?

If you aren't getting an alert at all then your code is running before your elements exist, eg your code is in head while the body hasn't been parsed yet. — Patrick Evans, Sep 18 '18 at 13:12
Thank you all for help it works very good now and very nice to know different ways of getting this work! :) — , Sep 18 '18 at 14:04

Mamun · Accepted Answer · 2018-09-18T13:12:51.537

4

You can use querySelectorAll() to target all the div inside the class. Change the selector to:

document.querySelectorAll(".ce > div");

var x = document.querySelectorAll(".ce > div");
for (var i = 0; i < x.length; i++) {
  var numbers = x[i].innerText;
  alert(numbers);
}

<div class="ce">
  <div class="lotB">9</div>
  <div class="lotB">3</div>
  <div class="lotB">28</div> == $0
</div>

edited Sep 18 '18 at 13:12

answered Sep 18 '18 at 13:10

Mamun

66,969
9
47
59

Why not `.lotB` directly? – Ankit Agarwal Sep 18 '18 at 13:12

score 2 · Answer 2 · answered Sep 18 '18 at 13:11

You need to do var x = document.getElementsByClassName("lotB") as lotB has that values. Also note that if you want to do any arithmetic operations on that values you need to use parseInt(numbers) to get its numeric representation.

var x = document.getElementsByClassName("lotB");
for (var i = 0; i < x.length; i++) {
  var numbers = x[i].innerText;
  alert(numbers);
}

<div class="ce">
  <div class="lotB">9</div>
  <div class="lotB">3</div>
  <div class="lotB">28</div>
</div>

score 1 · Answer 3 · answered Sep 18 '18 at 13:10

var x = document.getElementsByClassName("lotB");
for (var i = 0; i < x.length; i++) {
  var numbers = x[i].textContent;
  alert(numbers);
}

<div class="ce">
  <div class="lotB">9</div>
  <div class="lotB">3</div>
  <div class="lotB">28</div> == $0
</div>

score 1 · Answer 4 · answered Sep 18 '18 at 13:14

1

var numbers = x[i].textContent;

Rather than using InnerHtml use textContent

Difference between textContent vs innerText

answered Sep 18 '18 at 13:14

Suresh

923
1
10
21

score 1 · Answer 5 · answered Sep 18 '18 at 13:14

1

You could use spread syntax

[...document.getElementsByClassName("lotB")].forEach(e=>console.log(e.innerText));

<div class="ce">
  <div class="lotB">9</div>
  <div class="lotB">3</div>
  <div class="lotB">28</div> == $0
</div>

answered Sep 18 '18 at 13:14

Emeeus

5,072
2
25
37

score 1 · Answer 6 · answered Sep 18 '18 at 13:14

give each elements the same class

  <div class="ce">
   <div class="lotB">9</div>
   <div class="lotB">3</div>
   <div class="lotB">28</div> == $0
  </div>

the key here is that it says "get elements" and therefore it can handle multiple classes that are the same

var x = document.getElementsByClassName("lotB");
for (var i = 0; i < x.length; i++) {
  var numbers = x[i].innerHtml;
  alert(numbers);
}

i use .innerHtml here

How do you get the inner text inside these classes with javascript?

6 Answers6