Adding all elements with child class name to one array

user_11724193 0
Viewed 438

Adding all elements with child class name to one array. But it adds them to three separate arrays. Why?

document.querySelectorAll('.child').forEach(function(el) {
  var arr = []
  arr.push(Number(el.textContent))
  var largest = Math.max(arr);
  console.log(arr)
})
<div id=“container”>
  <ul>
    <li>5</li>
    <li>10</li>
    <li>15</li>
    <li class="child">20</li>
    <li>25</li>
    <li>30</li>
  </ul>
  <div class="child">
    <p>99</p>
  </div>
  <div class="child">
    <p>63</p>
  </div>
  <div id="bNg8Rb">
  </div>
  <div id="CAIQAA"></div>
  <div id="LC20lb"></div>
</div>

html javascript
1 Answers

Your problem is you are defining a new array everytime your program goes through your foreach loop. define it before the foreach loop and that will solve your problem.

var arr = [];

document.querySelectorAll('.child').forEach(function(el) {
  arr.push(Number(el.textContent))
})

var largest = Math.max(...arr);

console.log(arr);
console.log(largest);
<div id=“container”>
  <ul>
    <li>5</li>
    <li>10</li>
    <li>15</li>
    <li class="child">20</li>
    <li>25</li>
    <li>30</li>
  </ul>
  <div class="child">
    <p>99</p>
  </div>
  <div class="child">
    <p>63</p>
  </div>
  <div id="bNg8Rb">
  </div>
  <div id="CAIQAA"></div>
  <div id="LC20lb"></div>
</div>

user_93578720
Related