Question 44289 in Html Question posted in
Some basic documentation can be found here.

Two step click process fails one step – Html

The following code is supossed to do the following two click process:

  1. First click on .imagenes makes opacity to drop down, and .logo visible.

  2. Second click on .imagenes returns its opacity to 1 and .logo hides again.

Instead, it goes through the two click cycle but .logo does not show up.
Can you figure out 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>

<script src="JS.js"></script> 
</body>
</html>
Tags:

2

Answers


  1. 0

    You’re only Changing the opacity one way, but you’ll need to change it back on second click.

    Lets simplefy this by adding 2 CSS classes: hide and show, which have opacity 0 or 1.

    Then you can loop over all the box‘es :

    [ ...document.querySelectorAll('.box') ].forEach(box => {

    And get the images and logo inside that box:

    let boxImagenes = box.querySelector('.imagenes');
let boxLogo = box.querySelector('.logo');

    Here we can add an EventListener that will replace() the show class with hide, and visa versa for the images.

    boxImagenes.addEventListener("click", () => {
        boxLogo.classList.replace('hide', 'show');
        boxImagenes.classList.replace('show', 'hide');
    });

    Then add another EventListener for the Logo that will revert the action from the first click

    Note: Removed the link + added placeholder images for a better demo

    [ ...document.querySelectorAll('.box') ].forEach(box => {

    let boxImagenes = box.querySelector('.imagenes');
    let boxLogo = box.querySelector('.logo');
    
    boxImagenes.addEventListener("click", () => {
        boxLogo.classList.replace('hide', 'show');
        boxImagenes.classList.replace('show', 'hide');
    });    
    
    boxLogo.addEventListener("click", () => {
        boxLogo.classList.replace('show', 'hide');
        boxImagenes.classList.replace('hide', 'show');
    });    
});
    #A {
  position: relative;
  border: 1px solid red;
}

.logo {
    position: absolute;
    top:0;
}

.show { opacity: 1; }
.hide { opacity: 0; }
    <div id ="A" class="box">
    <div class="imagenes show">
        <img src="https://picsum.photos/50?random=1">
    </div>
    <div class="logo hide">
        <img id="Alog" src="https://picsum.photos/50?random=2">
        <img id="youspot" src="https://picsum.photos/50?random=3" class="youtube-btn">
    </div>
</div>
    Login or Signup to reply.
  2. 0

    Unlike imagenes, there on logo you are using pictures that have spaces in them.

    You can either remove those spaces or you can use the characters that replace space which are normally a plus (+) sign or %20.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search