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
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';
});
More specific to img tag
.addEventListener('click', ($event) => {
event.target.querySelector('img').src="someotherimage.png";
});