Having an issue with the Image gallery task

George.C · February 25, 2021, 5:55am

Hey guys.

This is the task I’m talking about - Image Gallery

So, here’s where I’m getting stuck: When I click “Darken” button, it darkens the image and then the button changes to “Lighten” (as it should). The problem is, when I click “Lighten” button, it doesn’t actually lighten the picture back to its original state, it just stays dark. Please help me understand the issue with my code. Is there something wrong with my setAttribute command or “if” statements?

gist.github.com

https://gist.github.com/gchib00/c404e2d6f7b9b51507b2c332b32b7bf5

gistfile1.txt

const displayedImage = document.querySelector('.displayed-img');
const thumbBar = document.querySelector('.thumb-bar');

const btn = document.querySelector('button');
const overlay = document.querySelector('.overlay');

/* Looping through images */
for (let i=1; i<=5; i++){
	const newImage = document.createElement('img');
	newImage.setAttribute('src', "pic"+i+".jpg");

This file has been truncated. show original

George.C · February 27, 2021, 6:13am

I was able to find the solution. Here’s the revised code in case anyone else faces the same issue: https://gist.github.com/gchib00/db1e8f98a689dd833b9c5545f1e3fd7e

What I did was to put both “if” statements under one addEventListener command, instead of having two separate addEventListener commands for each “if” statement.

Ran · February 28, 2021, 10:48am

Hi @George.C,
I m just working through these as well and had the same problem.
So in the code the currentClass is initialised into whatever the class attribute is to begin with. In this case it is dark.

let currentState = btn.getAttribute("class");

The code you created is excellent as it carries out the changes but the currentClass is still initialised with the same value of dark. at the end of each if you need to reinitialise the current class variable so the new class. This means that you put the same code as above without the ‘let’.

Does this make sense?
BTW, great to meet someone who is working through the MDN topics as well. I am on the front end web developer route and this stuff is golden.

Ran

Ran · February 28, 2021, 10:50am

Sorry, didnt see this and your code is even better as it only does it once.
Le me borrow it.