J'essaie d'ajouter un événement de clic à chaque image de ma liste. La fonction n'est pas déclenchée pour une raison quelconque. Pouvez-vous découvrir pourquoi?

remarque: si j'appelle ShowOverlayLayer () par programme, c'est OK.

Voici mon code: EDIT - J'ai inséré mon code CSS complet, j'ai remarqué que sans cela comme certains l'ont écrit - cela fonctionne. Il se trouve donc quelque part dans le code CSS supplémentaire

let imagesList = document.getElementsByClassName("smallImage");
let overlayLayer = document.getElementById("overlayLayer");

for (let i = 0; i < imagesList.length; i++) {
  imagesList[i].addEventListener("click", (() => {
    ShowOverlayLayer();
  }));
}

function ShowOverlayLayer() {
  if (!overlayLayer.classList.contains("overlayLayerShow")) {
    overlayLayer.classList.add("overlayLayerShow");
  }
  if (overlayLayer.classList.contains("overlayLayerHide")) {
    overlayLayer.classList.remove("overlayLayerHide");
  }
}
<!-- edited code -->

body{
   margin: 0;
}

html, body {
    height: 100%;
    width: 100%;
}


.smallImage{
    float: left;
    position: relative;
    height: 100%;
}

#overlayLayer{
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: black;
}

.overlayLayerHide{
    opacity: 0;
}

.overlayLayerShow{
    opacity: 0.8;
}
<!DOCTYPE html>
<html lang="en-US">

<head>
  <!--CSS link-->
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div id="gallerySection">
    <img class="smallImage" src="images/adult-camping.jpg" />
    <img class="smallImage" src="images/beach-clouds.jpg" />
    <img class="smallImage" src="images/brown-country.jpg" />
    <img class="smallImage" src="images/clouds-dawn.jpg" />
  </div>
  <div id="overlayLayer" class="overlayLayerHide">

  </div>
  <!--JS link-->
  <script src="script.js"></script>
</body>

</html>

ce code doit définir une superposition div

1
user3584783 4 nov. 2019 à 21:52

1 réponse

En fait, l'événement s'est correctement déclenché pour chaque image. Je soupçonne que vous pensez que cela ne fonctionne pas parce que vous n'avez pas obtenu le résultat attendu de votre code, jetez un œil au code et à la sortie de la console ci-dessous.

let imagesList = document.getElementsByClassName("smallImage");
let overlayLayer = document.getElementById("overlayLayer");

for (let i = 0; i < imagesList.length; i++) {
  imagesList[i].addEventListener("click", (() => {
    ShowOverlayLayer();
  }));
}

function ShowOverlayLayer() {
console.log('clicked'); 
}
#overlayLayer {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: black;
}

.overlayLayerHide {
  opacity: 0;
}

.overlayLayerShow {
  opacity: 0.8;
}
<!DOCTYPE html>
<html lang="en-US">

<head>
  <!--CSS link-->
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div id="gallerySection">
    <img class="smallImage" src="images/adult-camping.jpg" />
    <img class="smallImage" src="images/beach-clouds.jpg" />
    <img class="smallImage" src="images/brown-country.jpg" />
    <img class="smallImage" src="images/clouds-dawn.jpg" />
  </div>
  <div id="overlayLayer" class="overlayLayerHide">

  </div>
  <!--JS link-->
  <script src="script.js"></script>
</body>

</html>

Si votre code ne fonctionne toujours pas, essayez Vider le cache et Hard Reload sur votre navigateur. Merci :)

0
Muhammad Nabeel 4 nov. 2019 à 20:37