1

I am trying to add a click event to every image in my list. The function is not fired for some reason. Can you find out why?

note: if I call ShowOverlayLayer() programmatically, it is OK.

This is my code: EDIT - I inserted my full css code, I noticed that without it as some wrote - it is working. So it is somewhere in the extra css code maybe

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>

this code should set an overlay div

user3584783
  • 65
  • 5
  • Have you tried just using `onclick`? – King11 Nov 04 '19 at 18:55
  • No. I just want to understand what is wrong with this code. I can write it in several other ways but I must understand why this code is not working – user3584783 Nov 04 '19 at 18:57
  • 1
    I tried your code in a JSfiddle and your click event is correctly fired ( https://jsfiddle.net/0yrpwkjd/ ) Maybe you need to wait for the document to be ready before registering your events. – Nicolas Nov 04 '19 at 19:02
  • @Nicolas The ` – Barmar Nov 04 '19 at 19:28
  • I would still look into [this answer](https://stackoverflow.com/a/21814964/5784924) to put your function in a document ready listener. – Nicolas Nov 04 '19 at 19:32
  • That is so strange. Even here the code snippet runs correctly. In my code I am not reaching the function, when there is a break point in it. – user3584783 Nov 04 '19 at 19:33
  • @Nicolas I tried, it didn't work. – user3584783 Nov 04 '19 at 19:34
  • Do you have error in your console that might prevent your javascript from being correctly run ? Because what you provided here is working perfeclty. – Nicolas Nov 04 '19 at 19:35
  • No, nothing. I don't have an error. – user3584783 Nov 04 '19 at 19:38
  • Then the error isn't in what you've provided. – Nicolas Nov 04 '19 at 19:42
  • @Nicolas Further more: when I debug my code, I don't see that the click event was inserted to "onclick" event. I see there "null" – user3584783 Nov 04 '19 at 20:03
  • You can try replacing the `imagesList[i]` with `imagesList.item(i)` since it's the correct way to access a HTMLCollection. Other than that, i have no idea. – Nicolas Nov 04 '19 at 20:05

1 Answers1

0

Actually the event correctly fired for each image. I suspect whether you think its not works because you didn't get expected result from your code, Take a look the code and console output below. 

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>

If still your code doesn't works then, try Empty cache and Hard Reload on your browser. Thanks :)

Muhammad Nabeel
  • 620
  • 7
  • 10