I have followed the exercise on:
Ref MDNs developer homepage Exercises
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery
My solution works when the page loads and the Darken/Light button works fine…
BUT… After using the thumbs-bar the Darken/Light button doesn’t lighten/daken the picture anymore???
THe text content changes as expected and using console.log to debug everything seems fine.
I just can’t seem to figure it out… Can anybody help shet some light on it?? 
I came to the following JavaScript:
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 (var i = 1; i <= 5; i++) {
let xxx = “images/pic” + i + “.jpg”;
const newImage = document.createElement(‘img’);
newImage.setAttribute(‘src’, xxx);
thumbBar.appendChild(newImage);
}
function changeMainImg(e) {
let attri = e.target.src;
if (overlay.innerHTML === '') {
const newImage = document.createElement('img');
newImage.setAttribute('src', attri);
overlay.appendChild(newImage);
} else {
overlay.innerHTML = '';
const newImage = document.createElement('img');
newImage.setAttribute('src', attri);
overlay.appendChild(newImage);
}
};
thumbBar.addEventListener(‘click’, changeMainImg);
/* Wiring up the Darken/Lighten button */
function darkenImage() {
let attri = btn.getAttribute(‘class’);
//console.log(attri);
if (attri === "dark") {
btn.setAttribute('class', 'light');
btn.textContent = 'Lighten';
overlay.style.backgroundColor = "rgba(0,0,0,0.5)";
//console.log(attri);
} else {
btn.setAttribute('class', 'dark');
btn.textContent = 'Darken';
overlay.style.backgroundColor = "rgba(0,0,0,0)";
//console.log(attri);
}
};
btn.addEventListener(‘click’, darkenImage);
