Итак, я просто возился с HTML и Javascript, и мне было интересно, как сделать так, чтобы пользователь нажимал на изображение, а затем это изображение менялось после щелчка. Сначала я думал, что это будет простой вызов функции по клику, например:

HTML:

<input type="image" src="Images/img.png" id="img" onclick="imgChange()">

Javascript:

  function imgChange()
{
  var img = document.getElementById("img");

  img.src="Images/img2.png";

}

Но при выполнении это, похоже, не работает. Какие-либо предложения?

0
BoomerBlastoise 17 Янв 2022 в 09:25
2
Вы получаете какие-либо ошибки в консоли? Путь к образу правильный? Код вроде правильный.
 – 
TechySharnav
17 Янв 2022 в 09:35

4 ответа

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

  function imgChange() {
    var img = document.getElementById("img");

    img.src = "https://www.tompetty.com/sites/g/files/g2000007521/f/styles/photo-carousel/public/Sample-image10-highres.jpg?itok=TDZEPjP8";

  }
<input type="image" src="https://www.tompetty.com/sites/g/files/g2000007521/f/styles/photo-carousel/public/sample001.jpg?itok=0Riiujkr" id="img" onclick="imgChange()">
0
Developer West 17 Янв 2022 в 09:30

Ваш код работает отлично.

Проверьте местоположение вашего изображения, возможно, есть проблема.

И попробуйте добавить ./ перед адресом изображения ./ означает текущий каталог

Проверьте это здесь Пути к HTML-файлам

Как это :

function imgChange(){
    var img = document.getElementById("img");
    img.src = "./Images/img2.png";
}

И лучший способ сделать это, передав this в функцию. Здесь this — изображение, на которое будет нажат клик.

<input type="image" src="Images/img.png" onclick="imgChange(this)">
function imgChange(img){
   img.src = "./Images/img2.png";
}
0
Dark Rose 17 Янв 2022 в 09:54

Должно работать как есть, но вы можете попробовать передать элемент в функцию.

function imgChange(img){
  img.src = "https://w.wallhaven.cc/full/pk/wallhaven-pkgkkp.png"
}
<img src="https://w.wallhaven.cc/full/rd/wallhaven-rdwjj7.jpg" onclick="imgChange(this)">
0
csaseymour 17 Янв 2022 в 09:34

У меня отлично работает

function imgChange() {
  var img = document.getElementById("img");
  img.src="https://live.staticflickr.com/7166/6621290239_250dce025d_b.jpg";

}
<input type="image" src="https://live.staticflickr.com/7440/8838399307_9e9e9668f6_b.jpg" id="img" onclick="imgChange()">
0
thekingistheruler 17 Янв 2022 в 10:35