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?

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?

• javascript

Share Improve this question Follow edited Mar 20, 2019 at 12:37 Mikev 2,08211 gold badge1717 silver badges3131 bronze badges asked Sep 18, 2018 at 13:07 user5748960user5748960 3

• 1 You're selecting the wrong class. – Jared Smith Commented Sep 18, 2018 at 13:11
• 1 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 Commented Sep 18, 2018 at 13:12
• Thank you all for help it works very good now and very nice to know different ways of getting this work! :) – user5748960 Commented Sep 18, 2018 at 14:04

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 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>

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>

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>

var numbers = x[i].textContent;

Rather than using InnerHtml use textContent

Difference between textContent vs innerText

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>

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