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

Question

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

Answer 1

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';
});