tengo un botón con una imagen en su HTML interno y quiero cambiar esta imagen
<button id="button1"><img src="someimage.png"></button>
Intenté algo como esto (en una función, que se llama con el botón):
this.innerhtml.setAttribute("src","someotherimage.png"); this.innerhtml="<img src="someotherimage.png">";
Tengo varios botones que activan la misma función, pero quiero que la función solo cambie la imagen del botón que activó la función. ¿Puedo hacer esto sin darle a la imagen una identificación y usar una gran cantidad de declaraciones if para hacer coincidir la identificación de la imagen con el botón?
Gracias por adelantado
Con el parámetro de event
, tome el currentTarget
(el elemento al que está conectado el oyente, que será el botón) y desde allí puede obtener el hijo <img>
con .children[0]
.
.addEventListener('click', (e) => { e.currentTarget.children[0].src = 'someotherimage.png'; });
Más específico para la etiqueta img
.addEventListener('click', ($event) => { event.target.querySelector('img').src="someotherimage.png"; });