How to pass looped array items to function variable

Question

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.

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.

function changeBgAndTitle(element, event, backgroundColor, titleColor) {
  element.addEventListener(event, () => {
    const projectThumbnail = document.querySelectorAll('.projects-list img');
    const projectTitle = document.querySelectorAll('article h1');
    for (i = 0; i < projectThumbnail.length; i++) {
      console.log(projectThumbnail[0]);
    }
    for (i = 0; i < projectTitle.length; i++) {
      projectTitle[i].style.color = titleColor;
    }
  })
}
changeBgAndTitle(projectThumbnail[0], 'mouseover', '#0090d8', 'white');

<div class="projects-list">
  <article class="old-and-blue">
    <h1>old and blue</h1>
    <figure>
      <a href="/old-and-blue.html" class="noclick">
        <img src="assets/media/images/slides/old-and-blue.jpg" alt="">
      </a>
    </figure>
  </article>

  <article class="dably">
    <h1>dably</h1>
    <figure>
      <a href="/old-and-blue.html">
        <img src="assets/media/images/slides/dably.jpg" alt="">
      </a>
    </figure>
  </article>

  <article class="cairo">
    <h1>cairo</h1>
    <figure>
      <a href="/old-and-blue.html">
        <img src="assets/media/images/slides/cairoe.jpg" alt="">
      </a>
    </figure>
  </article>

  <article class="cta">
    <h1>cta</h1>
    <figure>
      <a href="/cta.html">
        <img src="assets/media/images/slides/cta.jpg" alt="">
      </a>
    </figure>
  </article>
</div>

projectThumbnail[0] should be projectThumbnail[i]. Also, you should declare i as a local variable. — Barmar
– Barmar, Commented Oct 17, 2018 at 22:12
You have an extra " in <a href="/cta.html" ">. That could be screwing up the rest of your HTML. Is that a copying error or in the real code? — Barmar
– Barmar, Commented Oct 17, 2018 at 22:16
no i am not copying real code the real code working fine, just wanna know if my approach is actually right, is my js approach is efficient ? if so i will try to fix what you said — Taste of Leaving
– Taste of Leaving, Commented Oct 17, 2018 at 22:19
The question says it's not working at all. Do you want to know if it's efficient, or do you want to know how to make it work? — Barmar
– Barmar, Commented Oct 17, 2018 at 22:20
yea i wanna know how to make it work, sorry if you misunderstood, and i appreciate that you are trying to help, please fix it to me its urgent — Taste of Leaving
– Taste of Leaving, Commented Oct 17, 2018 at 22:23

ahmetugurbulut · Accepted Answer · 2018-10-17 22:57:23Z

1

If you want to call addEventListener inside the loop:

function changeBgAndTitle(element, event, backgroundColor, titleColor) {
    const projectThumbnail = element.querySelectorAll('.projects-list img')[0];
    projectThumbnail.addEventListener(event, () => {
        var projectTitle = element.querySelectorAll('h1');
        projectTitle[0].style.color = titleColor;
    })
}

const articles = document.querySelectorAll('.projects-list article');

for (i = 0; i < articles.length; i++) {
    changeBgAndTitle(articles[i], 'mouseover', '#0090d8', 'white');

}

https://jsfiddle.net/zf2xb48e/

answered Oct 17, 2018 at 22:57

ahmetugurbulut

1,60911 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Taste of Leaving Over a year ago

this was perfect <3, it worked absolutely like how i wanted it to work

Barmar · Accepted Answer · 2018-10-17 22:38:26Z

You should be calling addEventListener inside the loop, not passing a single element to the function.

function changeBgAndTitle(event, backgroundColor, titleColor) {
  const projectThumbnail = document.querySelectorAll('.projects-list img');
  const projectTitle = document.querySelectorAll('article h1');
  projectThumbnail.forEach((element, i) => element.addEventListener(event, () => {
    console.log(element);
    projectTitle[i].style.color = titleColor;
    projectTitle[i].style.backgroundColor = backgroundColor;
  }));
}
changeBgAndTitle('mouseover', '#0090d8', 'white');

<div class="projects-list">
  <article class="old-and-blue">
    <h1>old and blue</h1>
    <figure>
      <a href="/old-and-blue.html" class="noclick">
        <img src="assets/media/images/slides/old-and-blue.jpg" alt="">
      </a>
    </figure>
  </article>

  <article class="dably">
    <h1>dably</h1>
    <figure>
      <a href="/old-and-blue.html">
        <img src="assets/media/images/slides/dably.jpg" alt="">
      </a>
    </figure>
  </article>

  <article class="cairo">
    <h1>cairo</h1>
    <figure>
      <a href="/old-and-blue.html">
        <img src="assets/media/images/slides/cairoe.jpg" alt="">
      </a>
    </figure>
  </article>

  <article class="cta">
    <h1>cta</h1>
    <figure>
      <a href="/cta.html">
        <img src="assets/media/images/slides/cta.jpg" alt="">
      </a>
    </figure>
  </article>
</div>

Thank you so so much its working perfect now, don't know how to thank you, bless you

Collectives™ on Stack Overflow

How to pass looped array items to function variable

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related