title: How to loop through array of childnodes and add a class to the next one every 0.5 seconds
body: <p>Trying to add a class ("show") to sequential childnodes in an array every 0.5 seconds so that I can taper the appearance of them. I'm getting the following error: Cannot read property 'classList' of undefined</p>
  
  <p>I've tried to take the nodelist and convert it to an array and loop through it, with a setTimeout for every 0.5 seconds + i, but I can't get the class to add to the parent (I want to add the "show" class to the top level div that has the "testimonial-wrapper" class).</p>
  
  <p><a href="https://codepen.io/Finches/pen/RXeZvy" rel="nofollow noreferrer">https://codepen.io/Finches/pen/RXeZvy</a></p>
  
  <pre><code>individualTestimonialsList = Array.from(testsEl.childNodes);
  
  console.log('testimonials', individualTestimonialsList);
  
  for (var i=0; i&lt;individualTestimonialsList.length; i++) {
      setTimeout(function() {
          individualTestimonialsList[i].classList.add("show");
      }, 500 * i);
  }
  </code></pre>
  
  <p>I've tried different ways of accessing the top level element at index i in the loop, but no success. Always get the "Cannot read property 'classList' of undefined" error despite seeing the "classList" property on them in the console.log I have in the code. Any help? Thanks.</p>
  
  <p>Edit: Please note that the code is activated on scroll, so the height of the codepen viewing window needs to be small so it can get triggered. </p>