The code below is intended to go through a two-click process as follows:
First click on .imagenes decreases opacity and makes .logo visible.
Second click on .imagenes returns the opacity to 1 and hides .logo again.
However, during this cycle of two clicks, .logo does not show up. Can you identify the reason why?
const imagenes = document.querySelectorAll('.imagenes');
const logos = document.querySelectorAll('.logo');
imagenes.forEach((imagen, index) => {
let count = 0;
imagen.addEventListener('click', () => {
if (count % 2 == 0) {
imagen.style.opacity = 0.1;
logos[index].style.opacity = 1;
} else {
imagen.style.opacity = 1;
logos[index].style.opacity = 0;
}
count++;
});
});
html {
box-sizing: border-box;
font-size: 16px;
}
body {
max-width: 1500px;
margin: 0 auto;
}
.gridA {
display: grid;
width: 50%;
height: auto;
grid-gap: .5rem;
grid-auto-rows: minmax(auto, min-content);
grid-template-columns: 1fr;
margin-right: .25rem;
overflow: hidden;
}
.gridB {
display: grid;
width: 50%;
height: auto;
grid-gap: .5rem;
grid-auto-rows: minmax(auto, min-content);
grid-template-columns: 1fr;
margin-left: .25rem;
overflow: hidden;
}
img {
width: 100%;
height: auto; /*img use its full width leaving empty height space*/
object-fit: cover;
display: block; /*fill empty space remaining after adding img*/
max-height: 100%;
overflow: hidden;
}
#A, #B {
position: relative;
}
.logo {
position: absolute;
visibility: hidden;
top:0;
}
.youtube-link {
position: absolute;
top: 80%;
left: 39%;
width: 15%;
}
.video-link {
position: absolute;
top:100%;
width: 10%;
left: 44%;
}
.youtube-link2 {
position: absolute;
top: 75%;
left: 42%;
width: 15%;
}
.youtube-link2:hover {
opacity: .6;
}
.video-link:hover {
opacity: .6;
}
.youtube-link:hover {
opacity: .6;
}<<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>"
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="gridA">
<div id ="A" class="box">
<div class="imagenes">
<img src="spotify-still.jpg">
</div>
<div class="logo">
<img id="Alog" src="Spotify Logo (PNG720p) - Vector69Com.png">
<a>
<a class="youtube-link2" target="_blank" href="https://www.youtube.com/watch?v=7ob_q2HsHWM">
<img id="youspot" src="pngwing.com(1) copy.png" class="youtube-btn">
</a>
</a>
</div>;
</div>;
<div ID ="B" class="box">
<div class="imagenes">
<img src="audi-q3-1-by-marc-trautmann 2.jpg">
</div>
<div class="logo">
<img id="Blog" src="Audi_logo_PNG3.png">>
</div>
</div>
</div>;
<div class="gridB">
</div><brt
</div><brt
<script src="JS.js"></script>
</body>
</html><brt