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

Html – How do I change OnClick to addEventListener in the example below?

The goal here is to completely get rid of OnClick in HTML and execute everything in JS instead, preferably by using addEventListener.

function ShowImage(imgs) {
  var expandedImg = document.getElementById("expandedImg");
  expandedImg.src = imgs.src;
  expandedImg.parentElement.style.display = "block";
}
div.gallery img {
  width: 100%;
  height: auto;
}

.field {
  padding: 3px 3px;
  float: left;
  width: 20%;
}

.expandedImg {
  width: 75%;
  margin: 0 auto;
}

.containerimage {
  position: relative;
  display: none;
  text-align: center;
}
<div class="containerimage">
  <!-- Expanded image -->
  <img id="expandedImg">
</div>

<div class="field">
  <div class="gallery">
    <img src="https://wallpapercave.com/dwp1x/wp5539369.jpg" onclick="ShowImage(this);"> </div>
</div>

<div class="field">
  <div class="gallery">
    <img src="https://wallpapercave.com/dwp1x/wp5441501.jpg" onclick="ShowImage(this);">
  </div>
</div>

<div class="field">
  <div class="gallery">
    <img src="https://wallpapercave.com/dwp1x/wp5405231.jpg" onclick="ShowImage(this);"> </div>
</div>

<div class="field">
  <div class="gallery">
    <img src="https://wallpapercave.com/dwp1x/wp4964086.png" onclick="ShowImage(this);"> </div>
</div>

Afterwards, I tried adding the following code in JS,

var galleryImages = document.querySelectorAll(".gallery img");
for (var image of galleryImages) {
  image.addEventListener('click', ShowImage);
}

However, this only makes the clicked image appear for a split second and disappear, showing only the image icon instead.

Screenshot

Tags:

5

Answers


  1. 0

    I couldn’t understand too much from you code. But I hope It will help you and Next time please try to ask question with clean code.

    const expandingImg = document.querySelector("any_css_selector_to_select_img");

expandingImg.addEventListener("click", (e) => 
    /* Write your function code here */
    /* use e.target to get the current targeting Element (In this case It is expandingImg) */
})
    Login or Signup to reply.
  2. 0

    To use addEventListener instead of onClick in the img tags, you can remove the onclick attributes from the HTML code and use addEventListener to attach a click event to each image in your JavaScript code.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gallery</title>
    <style>
        div.gallery img {
            width: 100%;
            height: auto;
        }
        .field{
            padding: 3px 3px;
            float: left;
            width:20%;
        }
        .expandedImg{
            width: 75%;
            margin: 0 auto;
        }
        .containerimage {
            position: relative; 
            display: none;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="containerimage">
        <!-- Expanded image -->
        <img id="expandedImg">
    </div>

    <div class="field">
        <div class="gallery">
            <img src="https://wallpapercave.com/dwp1x/wp5539369.jpg">
        </div>
    </div>

    <div class="field">
        <div class="gallery">
            <img src="https://wallpapercave.com/dwp1x/wp5441501.jpg">
        </div>
    </div>

    <div class="field">
        <div class="gallery">
            <img src="https://wallpapercave.com/dwp1x/wp5405231.jpg">
        </div>
    </div>

    <div class="field">
        <div class="gallery">
            <img src="https://wallpapercave.com/dwp1x/wp4964086.png">
        </div>
    </div>

    <script>
        function ShowImage(event) {
            var expandedImg = document.getElementById("expandedImg");
            expandedImg.src = event.target.src;
            expandedImg.parentElement.style.display = "block";
        }

        var galleryImages = document.querySelectorAll(".gallery img");
        for (var i = 0; i < galleryImages.length; i++) {
            galleryImages[i].addEventListener("click", ShowImage);
        }
    </script>
</body>
</html>
    Login or Signup to reply.
  3. 0

    Remove onclick attribute from tags and use this
    El =Document.getElementsById("id name")
    And
    El.addEventListener("onclick", put your entire function here)

    Login or Signup to reply.
  4. 0

    If i have undrestood your code correctly you just need to use document.querySelectorAll(.class) and then loop through them with document.addEventListener('click', 'your function()')

    Login or Signup to reply.
  5. 0

    I agree with @mihail nicoara

    I’ve done this snippet just after your edit, so this is perhaps a cross post.

            function ShowImage(imgs) {
          var expandedImg = document.getElementById("expandedImg");
          expandedImg.src = this.getAttribute("src");
          expandedImg.parentElement.style.display = "block";
        }
        var galleryImages = document.querySelectorAll(".gallery img");
        for (var image of galleryImages) {
          image.addEventListener('click', ShowImage);
        }
            div.gallery img {
          width: 100%;
          height: auto;
        }

        .field {
          padding: 3px 3px;
          float: left;
          width: 20%;
        }

        .expandedImg {
          width: 75%;
          margin: 0 auto;
        }

        .containerimage {
          position: relative;
          display: none;
          text-align: center;
        }
        <div class="containerimage">
      <!-- Expanded image -->
      <img id="expandedImg" alt="img">
    </div>

    <div class="field">
      <div class="gallery">
        <img src="https://wallpapercave.com/dwp1x/wp5539369.jpg" alt="img"> </div>
    </div>

    <div class="field">
      <div class="gallery">
        <img src="https://wallpapercave.com/dwp1x/wp5441501.jpg" alt="img">
      </div>
    </div>

    <div class="field">
      <div class="gallery">
        <img src="https://wallpapercave.com/dwp1x/wp5405231.jpg" alt="img"> </div>
    </div>

    <div class="field">
      <div class="gallery">
        <img src="https://wallpapercave.com/dwp1x/wp4964086.png" alt="img"> </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search