CODEWITHSUNDEEP
javascript
Chase Hudson
Chase Hudson

Reputation: 41

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

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.

Upvotes: 2

Views: 437

Answers (3)

Peter Seliger
Peter Seliger

Reputation: 13376

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>

Upvotes: 0

gtj520
gtj520

Reputation: 327

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>

Upvotes: 0

SteveBloX
SteveBloX

Reputation: 39

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>

Upvotes: 1

Related Questions