My goal is to hide the covers after they are clicked using an if statement within the for loop code. I believe this is where it should be placed.
Trying to prevent this action from happening.
https://i.sstatic.net/eLSto.png
I made an attempt at achieving this but unfortunately couldn't solve the issue.
What mistakes am I making in my attempts to resolve this?
https://jsfiddle.net/8mg0v6eL/2/
(function manageCover() {
"use strict";
function hide(el) {
el.classList.add("hide");
}
/*function coverClickHandler(evt) {
const cover = evt.currentTarget;
hide(cover);
}*/
function addCoverListener(evt) {
const cover = evt.target;
const coversSelector = ".jacket-left, .jacket-middle, .jacket-right";
const covers = document.querySelectorAll(coversSelector);
for (let i = 0; i < covers.length; i += 1) {
/*covers[i].addEventListener("click", coverClickHandler);*/
if (covers[i] !== evt.target) covers[i].hide(cover);
}
}
}());