Как поменять изображение при нажатии на кнопку в JavaScript

Смена изображения по клику — простой и эффектный способ оживить сайт.
Такой приём используют в галереях, при выборе товара, в слайдерах или играх. JavaScript позволяет легко изменить картинку, просто заменив значение атрибута src. Разберём всё по шагам.

HTML-разметка с изображением и кнопкой

htmlКопироватьРедактировать<img id="photo" src="image1.jpg" alt="Картинка" width="300">
<button onclick="changeImage()">Сменить картинку</button>

Картинка имеет id="photo", а кнопка вызывает функцию changeImage() при нажатии.

JavaScript-функция для замены картинки

javascriptКопироватьРедактироватьfunction changeImage() {
  const img = document.getElementById("photo");
  img.src = "image2.jpg"; // Указываем путь к новой картинке
}

При клике изображение image1.jpg заменяется на image2.jpg.

Пример: смена туда-обратно

javascriptКопироватьРедактироватьfunction changeImage() {
  const img = document.getElementById("photo");
  if (img.src.includes("image1.jpg")) {
    img.src = "image2.jpg";
  } else {
    img.src = "image1.jpg";
  }
}

Так можно «переключать» изображение туда и обратно.

Пример с несколькими изображениями (слайдер)

javascriptКопироватьРедактироватьlet images = ["img1.jpg", "img2.jpg", "img3.jpg"];
let index = 0;

function nextImage() {
  const img = document.getElementById("photo");
  index = (index + 1) % images.length;
  img.src = images[index];
}

Каждое нажатие покажет следующую картинку из массива.

Заключение

Смена изображения в JavaScript — простая, но мощная функция. Она используется в галереях, интернет-магазинах и даже в играх. Просто меняй значение src у тега <img>, и ты получишь интерактивный элемент без лишних библиотек.