CODEWITHSUNDEEP
javascripthtmlimageinnerhtml
Leon Petzold
Leon Petzold

Reputation: 55

how to change the source of an image, which is in the innerhtml of another element?

i have a button with an image in its innerhtml and i want to change this image

<button id="button1"><img src="someimage.png"></button>

i tried something like this (in a function, which is called by the button):

this.innerhtml.setAttribute("src","someotherimage.png");
this.innerhtml="<img src="someotherimage.png">";

i have multiple buttons which trigger the same function, but i want the function to only change the img of the button, which triggered the function. Can i do this without giving the image an ID and using a buttload of if-statements to match the image-id to the button?

Thanks in advance

Upvotes: 1

Views: 324

Answers (2)

navnath
navnath

Reputation: 3714

More specific to img tag

.addEventListener('click', ($event) => {
    event.target.querySelector('img').src="someotherimage.png";
 });

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 370819

With the event parameter, take the currentTarget (the element the listener is attached to - which will be the button) and from there you can get the child <img> with .children[0].

.addEventListener('click', (e) => {
  e.currentTarget.children[0].src = 'someotherimage.png';
});

Upvotes: 4

Related Questions