как изменить источник изображения, которое находится в файле innerhtml другого элемента?

avatar
Leon Petzold
8 августа 2021 в 18:24
83
2
1

у меня есть кнопка с изображением во внутреннем HTML, и я хочу изменить это изображение

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

пробовал так (в функции, которая вызывается по кнопке):

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

у меня есть несколько кнопок, которые запускают одну и ту же функцию, но я хочу, чтобы функция меняла изображение только той кнопки, которая активировала эту функцию. Могу ли я сделать это, не присваивая изображению идентификатор и используя кучу операторов if для сопоставления идентификатора изображения с кнопкой?

Заранее спасибо

Источник
Carsten Massmann
8 августа 2021 в 18:30
1

.innerHTML просто возвращает строку. И у строк нет методов, которые есть у элемента DOM. Вы можете выбрать изображение как дочерний элемент кнопки и присвоить новое значение его свойству src с выражением document.querySelector("button img").src="newURL.png"

Ответы (2)

avatar
CertainPerformance
8 августа 2021 в 18:26
4

С параметром event возьмите currentTarget (элемент, к которому подключен слушатель, который будет кнопкой), и оттуда вы можете получить дочерний элемент <img> с .children[0].

.addEventListener('click', (e) => {
  e.currentTarget.children[0].src = 'someotherimage.png';
});
avatar
navnath
8 августа 2021 в 18:34
1

Более конкретно для тега img

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