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?