title: How to pass looped array items to function variable
body: <p>I have a group of images and each image has a title I want to change the background and title of each image to a different color on hover.</p>
  <p>Now I selected my images and titles and looped throw them to change their colors but its not working I am not surprised just want to know how to fix it.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function changeBgAndTitle(element, event, backgroundColor, titleColor) {
    element.addEventListener(event, () =&gt; {
      const projectThumbnail = document.querySelectorAll('.projects-list img');
      const projectTitle = document.querySelectorAll('article h1');
      for (i = 0; i &lt; projectThumbnail.length; i++) {
        console.log(projectThumbnail[0]);
      }
      for (i = 0; i &lt; projectTitle.length; i++) {
        projectTitle[i].style.color = titleColor;
      }
    })
  }
  changeBgAndTitle(projectThumbnail[0], 'mouseover', '#0090d8', 'white');</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="projects-list"&gt;
    &lt;article class="old-and-blue"&gt;
      &lt;h1&gt;old and blue&lt;/h1&gt;
      &lt;figure&gt;
        &lt;a href="/old-and-blue.html" class="noclick"&gt;
          &lt;img src="assets/media/images/slides/old-and-blue.jpg" alt=""&gt;
        &lt;/a&gt;
      &lt;/figure&gt;
    &lt;/article&gt;
  
    &lt;article class="dably"&gt;
      &lt;h1&gt;dably&lt;/h1&gt;
      &lt;figure&gt;
        &lt;a href="/old-and-blue.html"&gt;
          &lt;img src="assets/media/images/slides/dably.jpg" alt=""&gt;
        &lt;/a&gt;
      &lt;/figure&gt;
    &lt;/article&gt;
  
    &lt;article class="cairo"&gt;
      &lt;h1&gt;cairo&lt;/h1&gt;
      &lt;figure&gt;
        &lt;a href="/old-and-blue.html"&gt;
          &lt;img src="assets/media/images/slides/cairoe.jpg" alt=""&gt;
        &lt;/a&gt;
      &lt;/figure&gt;
    &lt;/article&gt;
  
    &lt;article class="cta"&gt;
      &lt;h1&gt;cta&lt;/h1&gt;
      &lt;figure&gt;
        &lt;a href="/cta.html"&gt;
          &lt;img src="assets/media/images/slides/cta.jpg" alt=""&gt;
        &lt;/a&gt;
      &lt;/figure&gt;
    &lt;/article&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>