Help and assessment wanted for image gallery

MDN Learn
#1

I’m completing the image gallery assessment for JavaScript and I’m mostly finished with it. I would like feedback on what I’ve done so far but I’ve run into a little issue at the end. I’m trying to complete the function to make the main displayed picture (the .displayed-img class) appear darker, but the last line of the function inside the event listener (overlay.style.backgroundColor = xxx) doesn’t seem to be working, even though I entered it in the exact same way the assessment says. The text content of the button changes but the image doesn’t turn darker. Does anybody have an answer to this?

Link to my code: Image gallery assessment (codepen.io)

#2

Hi @gijutaku23 and welcome to the community :wave:

You need to quote the right side to make it a string. Otherwise JS thinks it’s a JS function. You see the problem in the console:

“ReferenceError: rgba is not defined”

Regarding the rest of the code:
Since the image paths are different for every image, you could also use the whole path in the image array and the alt object. Then you could get rid of the switch and replace it with

newImage.src = image;
newImage.alt = altText[image];

I hope that helps. Feel free to ask if something is unclear. :slightly_smiling_face:

See you,
Michael

#3

Hey @mikoMK, thank you for the help! I tried your suggestions and the code runs fine now. I used the switch statement because the instructions said to make an array of the filenames for the images, not the paths. So I was figuring out a way to make the code in the loop to run distinctively to each array item. I guess I followed the instructions a little too literally. I appreciate your support :+1:t6:

1 Like
#4

Yay, now it looks fine. :+1:

Understandable.
Since the paths are identically when working with local images, this technique can be used with just the file names. You would then build the src with a fixed path and the file name from the loop variable. I think deviating from the instructions is okay in this case where you have different paths.