title: getAttribute in a for-loop using querySelector
body: <p>I have this variable</p>
  
  <pre><code>var carouselItems = document.querySelectorAll(".carouselItem")
  </code></pre>
  
  <p>that is meant to access this stuff</p>
  
  <pre><code>                %div#carouselMain.row
                  %div.col-xs-12.col-sm-3.carouselItem{:data =&gt; {:image =&gt; "images/art0"}}
                      %a{:href =&gt; "#"}
                          %div.featured-number
                              01
                          %div.featured-cat
                              Personal Article
                          %h3
                              TITLE
                  %div.col-xs-12.col-sm-3.carouselItem{:data =&gt; {:image =&gt; "images/art1"}}
                      %a{:href =&gt; "#"}
                          %div.featured-number
                              02
                          %div.featured-cat
                              Visual Essay
                          %h3
                              TITLE
                  %div.col-xs-12.col-sm-3.carouselItem{:data =&gt; {:image =&gt; "images/art2"}}
                      %a{:href =&gt; "#"}
                          %div.featured-number
                              03
                          %div.featured-cat
                              1st Year Feature
                          %h3
                              TITLE
                  %div.col-xs-12.col-sm-3.carouselItem{:data =&gt; {:image =&gt; "images/art3"}}
                      %a{:href =&gt; "#"}
                          %div.featured-number
                              04
                          %div.featured-cat
                              Interview
                          %h3
                              TITLE
  </code></pre>
  
  <p>I created a function that has a for loop to access each div &amp; URL for something else, here is the JS code for that:</p>
  
  <pre><code>function marqueeGatherData() {
      [].forEach.call(carouselItems, function(index) {
          marqueeVars.totalPanels = index + 1
          for (var j = 0; j &lt; carouselItems.length; j++) {
              if (carouselItems[j].length) {
                  var panel_image = this.getAttribute("data-image" + ".png"),
                      panel_caption = this.getElementsByTagName("h3").innerHTML,
                      panel_link = this.getAttribute("href"),
                      panel_category = this.querySelectorAll(".featured-cat").innerHTML,
                      panel_number = this.querySelectorAll(".featured-number").innerHTML
              }
          }
  *random stuff*
  })
  }
  </code></pre>
  
  <p>But the problem arises when you notice that</p>
  
  <pre><code>console.log(panel_caption)
  </code></pre>
  
  <p>is returning 4 undefined values, which means the variable is unable to link itself to it's appropriate div. How would I go about solving this problem? I've tried adding the for-loop variable but that didn't do anything. Does it have anything to do with my function being called before the DOM has loaded?</p>