0

I am using this javascript to blow up an image upon click:

<script>
  function zoomIn(event) {
    var element = event.target;
    // Create a new image element for the zoomed image
    var zoomedImage = new Image();
    zoomedImage.src = element.src;
    zoomedImage.classList.add("zoomed-image");

    // Append the zoomed image to the body
    document.body.appendChild(zoomedImage);
  }

  function zoomOut(event) {
    var element = event.target;
    // Remove the zoomed image from the page
    var zoomedImage = document.querySelector(".zoomed-image");
    if (zoomedImage && zoomedImage.parentNode === document.body) {
      zoomedImage.parentNode.removeChild(zoomedImage);
      element.removeEventListener("dblclick", zoomOut);
    }
  }              
</script>

It creates a new blown up image, but the double click won't remove it.

I tried just using the remove.Child section, and it started removing the original images from my page, but with all the code now just nothing happens on double click.

PK_
  • 400
  • 2
  • 8
Bert
  • 1
  • 1
  • Can you provide you HTML and css please? – Maxime Baker May 10 '23 at 17:15
  • One thing that I can see, is that you do `element.removeEventListener("dblclick"zoomOut)`. You don't need to do that. When a element with event listeners is removed from the DOM, the listeners are removed too. https://stackoverflow.com/a/12528067/20325571 – Maxime Baker May 10 '23 at 17:19
  • uhm, where do you add the double click event listener? Your code only shows the removeEventLIstener. – Kokodoko May 10 '23 at 17:21
  • Please provide enough code so others can better understand or reproduce the problem. – Community May 11 '23 at 17:25

0 Answers0