is there any ways to put multiple textContent with same css values into a variable in JavaScript?

Question

I'm trying to find a way to put multiple text values that i extract from elements that has the same CSS and put them into a array in javascript. but i keep failing. i googled about it but couldn't find an answer for my problem.

anyone can tell what i did wrong and point out please?

here is the HTML part.

<div>
    James
   <div>English : <span class="jtest">80</span> </div>
   <div>Japanese : <span class="jtest">60</span> </div>
   <div>Science : <span class="jtest">78</span> </div>
   <div>Art : <span class="jtest">85</span> </div>
   <div>Philosophy : <span class="jtest">45</span> </div>
   <div>Physical tranning : <span class="jtest">65</span> </div>
</div>
<br><Br>
 <div>
    Von
   <div>English : <span class="vtest">80</span> </div>
   <div>Japanese : <span class="vtest">85</span> </div>
   <div>Science : <span class="vtest">67</span> </div>
   <div>Art : <span class="vtest">64</span> </div>
   <div>Philosophy : <span class="vtest">97</span> </div>
   <div>Physical tranning : <span class="vtest">25</span> </div>
</div>
<br><Br>
 <div>
    Crack
   <div>English : <span class="ctest">80</span> </div>
   <div>Japanese : <span class="ctest">88</span> </div>
   <div>Science : <span class="ctest">40</span> </div>
   <div>Art : <span class="ctest">70</span> </div>
   <div>Philosophy : <span class="ctest">80</span> </div>
   <div>Physical tranning : <span class="ctest">69</span> </div>
</div>

and here is javascript part.

<script>
var james = [''];
    james.push(document.getElementsByClassName("jtest"));
var Von = document.getElementsByClassName("vtest");
var Crack = document.getElementsByClassName("ctest");


console.log(james);
</script>

i want to put textContents of elements that has jtest class and put those values into a james variable like james ['80' , '60', '78', '85', '45', '65'];

Possible duplicate of [get text node of an element](https://stackoverflow.com/questions/6520192/get-text-node-of-an-element) — , Jul 01 '17 at 17:08

score 0 · Answer 1 · 2017-07-01T17:39:26.887

0

james = [];
Array.from(document.getElementsByClassName("jtest")).map(function(x){ james.push(x.textContent)});

console.log(james);

<div>
    James
   <div>English : <span class="jtest">80</span> </div>
   <div>Japanese : <span class="jtest">60</span> </div>
   <div>Science : <span class="jtest">78</span> </div>
   <div>Art : <span class="jtest">85</span> </div>
   <div>Philosophy : <span class="jtest">45</span> </div>
   <div>Physical tranning : <span class="jtest">65</span> </div>
</div>

edited Jul 01 '17 at 17:39

answered Jul 01 '17 at 07:40

`document.getElementsByClassName` returns a [node list](https://developer.mozilla.org/en-US/docs/Web/API/NodeList), which does not have an `innerHTML` property. How is your code supposed to work? – PeterMader Jul 01 '17 at 09:10
my bad,i fixed it – Jul 01 '17 at 16:29
Well, would be great if it returned an array, but unfortunately, it doesn't. It returns a node list, which for example doesn't have a `map` method. – PeterMader Jul 01 '17 at 16:31
@PeterMader `console.log(james.map); //function map() { [native code] }` – Jul 01 '17 at 16:51
Of course, `james` is an array which you fill using the for loop. But the return value of `document.getElementsByClassName` is not an array. It's a node list. – PeterMader Jul 01 '17 at 17:27
@PeterMader `Array.from().map()` – Jul 01 '17 at 17:40

Pawan Kumar · Answer 2 · 2017-07-01T07:53:49.207

Array declaration should be like arrayName = [];, if you initialize the array while declaring like this [''] it means arrayName[0] = '' and then whatever data you will push into array, it starts stores from index 1 as 0th index already has a blank value.

And you can fetch all the data of a div with property textContent.

$(document).ready(function() {
  debugger;
  var james = [];
  var elements = document.getElementsByClassName("jtest");
  for (var i = 0; i < elements.length; i++) {
    james.push(elements[i].textContent);
  }
  var Von = document.getElementsByClassName("vtest");
  var Crack = document.getElementsByClassName("ctest");


  console.log(james);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  James
  <div>English : <span class="jtest">80</span> </div>
  <div>Japanese : <span class="jtest">60</span> </div>
  <div>Science : <span class="jtest">78</span> </div>
  <div>Art : <span class="jtest">85</span> </div>
  <div>Philosophy : <span class="jtest">45</span> </div>
  <div>Physical tranning : <span class="jtest">65</span> </div>
</div>
<br>
<Br>
<div>
  Von
  <div>English : <span class="vtest">80</span> </div>
  <div>Japanese : <span class="vtest">85</span> </div>
  <div>Science : <span class="vtest">67</span> </div>
  <div>Art : <span class="vtest">64</span> </div>
  <div>Philosophy : <span class="vtest">97</span> </div>
  <div>Physical tranning : <span class="vtest">25</span> </div>
</div>
<br>
<Br>
<div>
  Crack
  <div>English : <span class="ctest">80</span> </div>
  <div>Japanese : <span class="ctest">88</span> </div>
  <div>Science : <span class="ctest">40</span> </div>
  <div>Art : <span class="ctest">70</span> </div>
  <div>Philosophy : <span class="ctest">80</span> </div>
  <div>Physical tranning : <span class="ctest">69</span> </div>
</div>

Thank you so much for your help Pawan ! – James David Deann Jul 03 '17 at 07:31 — James David Deann, Jul 03 '17 at 07:31

score 0 · Answer 3 · answered Jul 01 '17 at 07:52

Use document.querySelector to select all common classes i.e. (.jtest) then using for loop push each values to james array,

var james = [];
var jtest = document.querySelectorAll(".jtest");
for (var i = 0; i <= jtest.length - 1; i++) {
  james.push(jtest[i].textContent);
}
console.log(james);

<div>
  James
  <div>English : <span class="jtest">80</span> </div>
  <div>Japanese : <span class="jtest">60</span> </div>
  <div>Science : <span class="jtest">78</span> </div>
  <div>Art : <span class="jtest">85</span> </div>
  <div>Philosophy : <span class="jtest">45</span> </div>
  <div>Physical tranning : <span class="jtest">65</span> </div>
</div>
<br>
<Br>
<div>
  Von
  <div>English : <span class="vtest">80</span> </div>
  <div>Japanese : <span class="vtest">85</span> </div>
  <div>Science : <span class="vtest">67</span> </div>
  <div>Art : <span class="vtest">64</span> </div>
  <div>Philosophy : <span class="vtest">97</span> </div>
  <div>Physical tranning : <span class="vtest">25</span> </div>
</div>
<br>
<Br>
<div>
  Crack
  <div>English : <span class="ctest">80</span> </div>
  <div>Japanese : <span class="ctest">88</span> </div>
  <div>Science : <span class="ctest">40</span> </div>
  <div>Art : <span class="ctest">70</span> </div>
  <div>Philosophy : <span class="ctest">80</span> </div>
  <div>Physical tranning : <span class="ctest">69</span> </div>
</div>

Oh! Thank you so much frnt ! – James David Deann Jul 03 '17 at 07:30 — James David Deann, Jul 03 '17 at 07:30

is there any ways to put multiple textContent with same css values into a variable in JavaScript?

3 Answers3