title: How to iterate through DOM nodelist/array
body: <p>I'm having a difficult time trying to figure out how to iterate through an array of DOM elements.  I have an array of <code>div</code>s that contains <code>img</code> elements. I started with a nodelist but converted it to an array.  I'd like to be able to press specific buttons and have <code>div</code>s with certain classes disappear.  The event listener is functional because upon clicking a button the first element with the specified class disappears, just not the rest of the <code>div</code>s with the same class name.</p>
  
  <p>The relevant HTML</p>
  
  <pre><code>&lt;!-- list items for the project gallery --&gt;
        &lt;ul class="gallery-list"&gt;
          &lt;li class="gallery-list-item all-button"&gt;All&lt;/li&gt;
          &lt;li class="gallery-list-item indoor-button"&gt;Indoor&lt;/li&gt;
          &lt;li class="gallery-list-item outdoor-button"&gt;Outdoor&lt;/li&gt;
        &lt;/ul&gt;
        &lt;!-- flex container for gallery pictures --&gt;
        &lt;div class="gallery-flex-container"&gt;
          &lt;!-- flex items / content images --&gt;
          &lt;div class="gallery-flex-item show-all indoor"&gt;
            &lt;img src="images/indoor-1.jpg" alt="indoor garden picture"&gt;
          &lt;/div&gt;
          &lt;div class="gallery-flex-item show-all outdoor"&gt;
            &lt;img src="images/outdoor-1.jpg" alt="outdoor garden picture"&gt;
          &lt;/div&gt;
          &lt;div class="gallery-flex-item show-all indoor"&gt;
            &lt;img src="images/indoor-2.jpg" alt="indoor garden picture"&gt;
          &lt;/div&gt;
          &lt;div class="gallery-flex-item show-all outdoor"&gt;
            &lt;img src="images/outdoor-2.jpg" alt="outdoor garden picture"&gt;
          &lt;/div&gt;
          &lt;div class="gallery-flex-item show-all indoor"&gt;
            &lt;img src="images/indoor-3.jpg" alt="indoor garden picture"&gt;
          &lt;/div&gt;
          &lt;div class="gallery-flex-item show-all outdoor"&gt;
            &lt;img src="images/outdoor-3.jpg" alt="outdoor garden picture"&gt;
          &lt;/div&gt;
          &lt;div class="gallery-flex-item show-all indoor"&gt;
            &lt;img src="images/indoor-4.jpg" alt="indoor garden picture"&gt;
          &lt;/div&gt;
          &lt;div class="gallery-flex-item show-all outdoor"&gt;
            &lt;img src="images/outdoor-4.jpg" alt="outdoor garden picture"&gt;
          &lt;/div&gt;
          &lt;div class="gallery-flex-item show-all indoor"&gt;
            &lt;img src="images/indoor-5.jpg" alt="indoor garden picture"&gt;
          &lt;/div&gt;
          &lt;div class="gallery-flex-item show-all outdoor"&gt;
            &lt;img src="images/outdoor-5.jpg" alt="outdoor garden picture"&gt;
          &lt;/div&gt;
          &lt;div class="gallery-flex-item show-all indoor"&gt;
            &lt;img src="images/indoor-6.jpg" alt="indoor garden picture"&gt;
          &lt;/div&gt;
          &lt;div class="gallery-flex-item show-all outdoor"&gt;
            &lt;img src="images/outdoor-6.jpg" alt="outdoor garden picture"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>The relevant CSS</p>
  
  <pre><code>.hide-indoor {
    display: none;
  }
  
  .hide-outdoor {
    display: none;
  }
  </code></pre>
  
  <p>the relevant Javascript </p>
  
  <pre><code>// Script for gallery page picture toggle
  
  let imgArray = [...document.querySelectorAll('.gallery-flex-item')];
  
  console.log(imgArray);
  
  var listItem = document.querySelector('.gallery-list');
  var indoor = document.querySelector('.indoor');
  var outdoor = document.querySelector('.outdoor');
  
  listItem.addEventListener('click', function (e) {
    for (var i = 0; i &lt; imgArray.length; i++) {
      if (e.target.classList.contains('all-button')) {
        indoor.classList.remove('hide-indoor');
        outdoor.classList.remove('hide-outdoor');
  
      } else if (e.target.classList.contains('indoor-button')) {
  
  // Here is the section of code I tried incorporating the 'i' variable
  // and it works the exact same as the other two 'if' statements.
  // Only manipulating the first of elements with selected classes.
  
        if (imgArray[i].classList.contains('indoor')) {  
          indoor.classList.remove('hide-indoor');
        } else if (imgArray[i].classList.contains('outdoor')) {
          outdoor.classList.add('hide-outdoor');
        }
  
      } else if (e.target.classList.contains('outdoor-button')) {
        outdoor.classList.remove('hide-outdoor');
        indoor.classList.add('hide-indoor');
      }
  
    }
  });
  </code></pre>
  
  <p>This is the first time I've tried iterating through DOM elements so I'm really not sure where I'm going wrong.</p>