Как поменять изображение в JS при нажатии левой клавиши мыши??

Question

[genderless]

Делаю игру на чистом JS. Нужно чтобы при нажатии на документ левой клавиши мыши персонаж менял изображение на другое(гиф изображение). Я не знаю как это сделать, мой персонаж ходит вправо-влево, но надо, чтобы при нажатии клавиши мыши он менялся.
Помогите пожалуйств!

Answer 1

[Artur Aralin]

Первое нужно подписаться на событие с помощью addEventListner, затем найти свой объект при помощи querySelectorAll или другого метода поиска элемента в DOM. После этого изменяете нежный атрибут у DOM элемента

foundImg.src = 'my_value';

Comments

[genderless]

Можете по подробнее написать код с конкретным примером пожалуйста?
Заранее благодарю

[Artur Aralin]

someEl.addEventListener('click', () => {
  const character = document.getElementById('character'); // Подразумевается, что character это img

  character.src = 'someVal';
});

p.s. тут есть оговорка, на то, что при смене значения src будет "мелькать" персонаж из-за загрузки ресурсов, но это уже совсем другая история

[genderless]

someEl это название переменной в которой был пойман элемент, который должен меняться?

[Artur Aralin]

genderless, someEl это элемент на котором будет отлавливаться клик

[genderless]

Artur Aralin, а someVal это что?

[Artur Aralin]

genderless, очевидно, ссылка на изображение

[genderless]

Artur Aralin, я прошу прощения за тупость, но ссылка на изображение, которое появится при нажатии мыши разве не это?
const character = document.getElementById('character')

[Artur Aralin]

genderless, нет. Это только DOM элемент. Рекомендую вам почитать про DOM

[genderless]

Artur Aralin, тогда вместо someEl можно поставить window или document? Я хочу чтоб при клики на любое место в документе изображение менялось.
А вместо character что вставлять?

[Artur Aralin]

genderless, если хотите в любом месте, то добавляйте лисенер к document. Вместо character должен быть ваш img с каким то id.

В html
<img id="character" src="... " >

... 

В js

const character = document.getElementById('character');