Stuck on Image Gallery challenge

Hello, I am stuck on Gallery image challenge, particularly this part here:

In each loop iteration, you need to add a click event listener to the current newImage — this listener should find the value of the src attribute of the current image. Set the src attribute value of the displayed-img <img> to the src value passed in as a parameter.

Here is my code:

const displayedImage = document.querySelector(‘.displayed-img’);

const thumbBar = document.querySelector(‘.thumb-bar’);

const btn = document.querySelector(‘button’);

const overlay = document.querySelector(‘.overlay’);

/* Declaring the array of image filenames */

const images = [‘pic1.jpg’,‘pic2.jpg’,‘pic3.jpg’,‘pic4.jpg’,‘pic5.jpg’];

/* Looping through images */

const newImage = document.createElement(‘img’); // creates new img element

//newImage.setAttribute(‘src’, xxx);

thumbBar.appendChild(newImage);

for(image of images) {

let path = `images\\${image}`;



newImage.setAttribute('src', path);

//console.log(newImage);

thumbBar.addEventListener('click', newImage);

thumbBar.appendChild(newImage);

console.log(image);

}

// addEventListener(type, listener);

/* Wiring up the Darken/Lighten button */

I seem to have 3 images total, but one of them is corrupted. When I open the image in a separate tab, it says ‘xxx’ at the end of it, indicating the placeholder value.

One part that confuses me is the addEventListener part, I don’t know what should go in the field? Should it be a ‘click’ event or something else? If I understand correctly, I would have to click for a new image to change/upload, is that the desired effect?

Hi @CodeDisciple and welcome to the community :wave:

The path to the image should be `images/${image}` (/instead of \\)

Yes

No, the idea is to click on a small image in the thumbBar and make it display above as the big image. Your listener function should copy the src of the clicked image to the src of displayedImage.

Please tell me if you need more help :slightly_smiling_face:

Happy coding,
Michael

1 Like