Get an image source from a button click inside a div?

Question

Let's say I have a div that holds a button and an image. However I want to get that images source from a button click of that specific div. Example:

<div class="container">
  <div class="inner-container">
    <img src="fn4703gr5e" alt="">
    <button>Get image source from only the image inside of this div</button>
  </div>
  <div class="inner-container">
    <img src="7876jyhygfd" alt="">
    <button>Get image source from only the image inside of this div</button>
  </div>
  <div class="inner-container">
    <img src="mnbv5433sda" alt="">
    <button>Get image source from only the image inside of this div</button>
  </div>
</div>

I have something similar on a project that I am working on and have had a tough time finding a solution.

https://stackoverflow.com/questions/57810026/how-to-get-image-id-on-click-event — Rajesh Kanna, Dec 13 '22 at 17:50
@ChaseHudson ... Does the OP still participate in this thread? — Peter Seliger, Dec 23 '22 at 22:33
@ChaseHudson ... Regarding the so far provided answers / approaches are there any questions left? — Peter Seliger, Jan 09 '23 at 11:28

score 1 · Answer 1 · answered Dec 13 '22 at 18:00

You can use this code, each line is explained in a comment:

document.querySelectorAll(".container .inner-container button").forEach(button => {
  //for each button in .inner-container
  button.addEventListener("click", buttonClicked) //execute the function buttonClicked when clicked
})

function buttonClicked() {
  var imageElement = this.parentElement.querySelector("img") //get the image element in the div of the button
  var imageSrc = imageElement.src //get the src of the image
  console.log(imageSrc) //print it
}

<div class="container">
  <div class="inner-container">
    <img src="fn4703gr5e" alt="">
    <button>Get image source from only the image inside of this div</button>
  </div>
  <div class="inner-container">
    <img src="7876jyhygfd" alt="">
    <button>Get image source from only the image inside of this div</button>
  </div>
  <div class="inner-container">
    <img src="mnbv5433sda" alt="">
    <button>Get image source from only the image inside of this div</button>
  </div>
</div>

gtj520 · Answer 2 · 2022-12-13T18:49:12.760

let img;
let imgSrc;
const btns = Array.from(document.getElementsByTagName('button'));
btns.forEach((btn) => {
  btn.onclick = () => {
    img = btn.previousElementSibling;
    imgSrc = img.src;
    console.log(img.src);
  };
})

  <div class="container">
    <div class="inner-container">
        <img src="fn4703gr5e" alt="">
        <button>Get image source from only the image inside of this div</button>
    </div>
    <div class="inner-container">
        <img src="7876jyhygfd" alt="">
        <button>Get image source from only the image inside of this div</button>
    </div>
    <div class="inner-container">
        <img src="mnbv5433sda" alt="">
        <button>Get image source from only the image inside of this div</button>
    </div>
  </div>

score 0 · Answer 3 · answered Dec 13 '22 at 19:11

Making use of event delegation one just needs to implement a single event handler which one registers exactly once at the parent/root node of all elements one wants to handle the inside 'click' type event from.

The handler could use e.g. Optional Chaining and the Nullish Coalescing Operator in order to retrieve the button related image's src value in an convenient and fail-safe way.

function logButtonClickRelatedImageSource({ target }) {
  const src = target
    .closest('button')
    ?.closest('.inner-container')
    ?.querySelector('img')
    ?.src ?? null;

  if (src !== null) {
    console.log(src);
  }
}

document
  .querySelector('.container')
  .addEventListener('click', logButtonClickRelatedImageSource);

button { margin: 10px 0; cursor: pointer; }
.as-console-wrapper { left: auto!important; width: 50%; min-height: 100%; }

<div class="container">
  <div class="inner-container">
    <img src="fn4703gr5e" alt="">
    <button>log button click related image source</button>
  </div>
  <div class="inner-container">
    <img src="7876jyhygfd" alt="">
    <button>log button click related image source</button>
  </div>
  <div class="inner-container">
    <img src="mnbv5433sda" alt="">
    <button>log button click related image source</button>
  </div>
</div>

Get an image source from a button click inside a div?

3 Answers3