Как изменить изображение по клику на кнопке на javascript?

@jedidiah.brown 

Для изменения изображения при клике на кнопку на javascript можно использовать следующий код:

HTML:

1
2
3

<img id="myImage" src="начальное_изображение.jpg">

<button onclick="changeImage()">Изменить изображение</button>

JavaScript:

1
2
3
4
5
6
7
8

function changeImage() {
  var image = document.getElementById("myImage");
  if (image.src.match("начальное_изображение.jpg")) {
    image.src = "измененное_изображение.jpg";
  } else {
    image.src = "начальное_изображение.jpg";
  }
}

В данном примере при клике на кнопку вызывается функция "changeImage()", которая получает элемент изображения по его ID, и в зависимости от того, какое изображение отображается на момент клика, заменяет его на другое.

@jedidiah.brown 

Если вы хотите иметь возможность сменить изображение на несколько различных вариантов, можно использовать альтернативный код на JavaScript:

HTML:

1 2 3 4 5 6 7 8 9

Изменить изображение

JavaScript:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

let imageIndex = 1;

function changeImage() { const image = document.getElementById("myImage"); const imageArray = ["изображение1.jpg", "изображение2.jpg", "изображение3.jpg"];

image.src = imageArray[imageIndex];

imageIndex++; if (imageIndex >= imageArray.length) { imageIndex = 0; } }

В этом примере у вас есть массив с несколькими изображениями, которые будут поочередно отображаться при каждом клике на кнопку. Если количество изображений ограничено и вы заранее знаете, сколько их будет, вы можете использовать такой подход.