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

How to display an image clicking on it using modal window on HTML, CSS and JS

I’m trying to show an image when I click on it using a modal window, but, when I click on it doesn’t display anything. The code is the following:

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Seccion 1</title>
    <link rel="stylesheet" href="seccion1.css">
  </head>
  <body>
    <div class="container">
      <img src="./Seccion1/pueblodesal2.png" alt="Imagen central" class="center-image">
      <div class="image-grid">
        <img src="./Seccion1/1.jpg" alt="Imagen 1" class="grid-image" data-src="./Seccion1/1.jpg">
        <img src="./Seccion1/2.jpg" alt="Imagen 2" class="grid-image" data-src="./Seccion1/2.jpg">
        <img src="./Seccion1/3.jpg" alt="Imagen 3" class="grid-image" data-src="./Seccion1/3.jpg">
        <img src="./Seccion1/4.jpg" alt="Imagen 4" class="grid-image" data-src="./Seccion1/4.jpg">
        <img src="./Seccion1/5.jpg" alt="Imagen 5" class="grid-image" data-src="./Seccion1/5.jpg">
        <img src="./Seccion1/6.jpg" alt="Imagen 6" class="grid-image" data-src="./Seccion1/6.jpg">
        <img src="./Seccion1/7.jpg" alt="Imagen 7" class="grid-image" data-src="./Seccion1/7.jpg">
        <img src="./Seccion1/8.jpg" alt="Imagen 8" class="grid-image" data-src="./Seccion1/8.jpg">
        <img src="./Seccion1/9.jpg" alt="Imagen 9" class="grid-image" data-src="./Seccion1/9.jpg">
        <img src="./Seccion1/10.jpg" alt="Imagen 10" class="grid-image" data-src="./Seccion1/10.jpg">
        <img src="./Seccion1/11.jpg" alt="Imagen 11" class="grid-image" data-src="./Seccion1/11.jpg">
        <img src="./Seccion1/12.jpg" alt="Imagen 12" class="grid-image" data-src="./Seccion1/12.jpg">
        <img src="./Seccion1/13.jpg" alt="Imagen 13" class="grid-image" data-src="./Seccion1/13.jpg">
        <img src="./Seccion1/14.jpg" alt="Imagen 14" class="grid-image" data-src="./Seccion1/14.jpg">
        <img src="./Seccion1/15.jpg" alt="Imagen 15" class="grid-image" data-src="./Seccion1/15.jpg">
        <img src="./Seccion1/16.jpg" alt="Imagen 16" class="grid-image" data-src="./Seccion1/16.jpg">
        <img src="./Seccion1/17.jpg" alt="Imagen 17" class="grid-image" data-src="./Seccion1/17.jpg">
      </div>
      
      <div id="modal" class="modal">
        <span class="close">&times;</span>
        <img src="" alt="Modal image" class="modal-content">
      </div>
      
    </div>
    <script src="seccion1.js"></script>
  </body>
</html>

JS

const images = document.querySelectorAll(".grid-image");
const modal = document.getElementById("modal");
const modalContent = document.getElementById("modal-content");
const closeBtn = document.querySelector(".close");


images.forEach((image) => {
  image.addEventListener("click", () => {
    modal.style.display = "block";
    console.log(image.src)
    modalContent.src = image.src;
  });
});


closeBtn.addEventListener("click", () => {
  modal.style.display = "none";
});


window.addEventListener("click", (event) => {
  if (event.target == modal) {
    modal.style.display = "none";
  }
});

In the console I get this error:

Uncaught TypeError: Cannot set properties of null (setting 'src')
at HTMLImageElement.<anonymous> (seccion1.js:11:22)

I try to debug the image.src and it gets the correct path. I’d like to know how to display the image using the src at class modal-content.

Tags:

2

Answers


  1. 0

    You don’t have #modal-content in html.

    <img src="" alt="Modal image" id="modal-content" class="modal-content">
    Login or Signup to reply.
  2. 0

    In your HTML code, modal-content is a class, not an id, so when you call getElementById, that returns null. Just add an id to the modal-content element.

    <img src="" alt="Modal image" class="modal-content" id="modal-content">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search