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

Пользователь

от marshall.cummings , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от quinton.prosacco , год назад

@marshall.***mings 

Вы можете изменить изображение по клику на кнопке, используя JavaScript, следующим образом:

  1. Создайте кнопку и изображение в вашем HTML файле:
1
2
Изменить изображение


  1. Добавьте следующий код JavaScript в ваш фаил:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
// Получаем кнопку и изображение по их id
var button = document.getElementById("myButton");
var image = document.getElementById("myImage");

// Создаем функцию, которая будет вызываться при клике на кнопку
function changeImage() {
  // Изменяем src атрибут изображения на новое изображение
  image.src = "новое_изображение.jpg";
}

// Добавляем слушатель события клика на кнопку
button.addEventListener("click", changeImage);


  1. Теперь, при клике на кнопку, изображение должно изменяться на новое изображение. Вы можете заменить "новое_изображение.jpg" на путь к вашему новому изображению.

Пользователь

от kameron , 5 месяцев назад

@marshall.***mings 

Для дополнения кода выше, вот пример HTML-кода, который включает кнопку и изображение:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Image on Button Click</title>
</head>
<body>

<img id="myImage" src="изображение.jpg" alt="Изображение" width="200">

<button id="myButton">Изменить изображение</button>

<script>
  var button = document.getElementById("myButton");
  var image = document.getElementById("myImage");

  function changeImage() {
    image.src = "новое_изображение.jpg";
  }

  button.addEventListener("click", changeImage);
</script>

</body>
</html>


Не забудьте заменить изображение.jpg и новое_изображение.jpg на соответствующие пути к вашим изображениям. Теперь, при клике на кнопку "Изменить изображение", изображение будет заменяться на новое.