Build a Lightbox Viewer - Test #16 - click close button

JavaScript
1

Tell us what’s happening:

After clicking a thumbnail to show the large image, when I click the ‘x’ or the full size image, the large image is no longer visible. Despite this, my program is failing test #16 - which says:

  1. When your .lightbox element is visible and you click the #close button, the .lightbox elements display should be set back to none.

I do this in my second event handler in my JS. Any advice for passing this test? Thanks in advance.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="styles.css" />
    <title>Lightbox Viewer</title>
  </head>

  <body>
    <div class="lightbox">
      <span id="close">&times;</span>
      <img id="lightbox-image" />
    </div>

    <h1>Museum Gallery</h1>

    <div class="gallery">
      <img
        src="https://cdn.freecodecamp.org/curriculum/labs/stonehenge-thumbnail.jpg"
        class="gallery-item"
      />
      <img
        src="https://cdn.freecodecamp.org/curriculum/labs/storm-thumbnail.jpg"
        class="gallery-item"
      />
      <img
        src="https://cdn.freecodecamp.org/curriculum/labs/trees-thumbnail.jpg"
        class="gallery-item"
      />
    </div>

    <script src="script.js"></script>
  </body>
</html>


/* file: script.js */
const gallery = document.querySelectorAll(".gallery img");
const lightbox = document.querySelector(".lightbox");
const lightboxAll = document.querySelectorAll(".lightbox");
const lightboxImg = document.querySelector(".lightbox img");
const close = document.querySelector("#close");
gallery.forEach((element) => {
  element.addEventListener("click", () => {
    lightbox.style.display = "flex";
    let largephotoName = element.src.replace("-thumbnail", "");
    lightboxImg.src = largephotoName;
  });

  lightboxAll.forEach((element) => {
    element.addEventListener("click", () => {
      lightbox.style.display = "none";
    });
  });
});


/* file: styles.css */
h1 {
  background-color: rgb(224, 245, 238);
  text-align: center;
  padding: 30px;
  margin-top: 100px;
}

.lightbox {
  display: none;
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: whitesmoke;
  top: 0px;
  left: 0px;
}

.gallery {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.gallery img {
  height: 300px;
  width: 200px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0

Challenge Information:

Build a Lightbox Viewer - Build a Lightbox Viewer

2

Hi there. Your function aren’t trigger on click event on #close button

3

Hi there. Your function aren’t trigger click event on #close button

4

You dont have any alt attr’s for your images, it might help to add them in your HTML.

5

Thank you! I see I was targeting the parent element (.lightbox), not the specific children elements(span, img). I changed the code to only target the children, but then test 17 failed. So I switched it to target the parent and children elements like so:

const lightboxAll = document.querySelectorAll(
  "#close, #lightbox-image, .lightbox"
);

And that worked for me. Thank you for your help.

1 Like