Изменение изображения при нажатии с помощью JavaScript

#javascript #image #onclick #src

#язык JavaScript #изображение #onclick #Src

Вопрос:

Эй, я хочу изменить изображение при нажатии на img с помощью javascript, это работает один раз, если я нажму на изображение, оно изменит scr, но не изменит его обратно

 function ImgClick() {  var img = document.getElementById("b1")  if (img.src = "img/RoteAmpel.jpg") {  img.src = "img/GrueneAmpel.jpg";  } else {  img.src = "img/RoteAmpel.jpg";  }   }

 lt;!DOCTYPE htmlgt; lt;htmlgt;  lt;headgt;  lt;titlegt;Mouse Eventslt;/titlegt;  lt;meta charset="UTF-8"gt;  lt;/headgt;  lt;bodygt;  lt;h3gt;Mouse Eventslt;/h3gt;  lt;img src="img/RoteAmpel.jpg" alt="Bildwechsel" title="Bildwechsel" id="b1" onclick="ImgClick()" /gt;   lt;/bodygt;  lt;/htmlgt;

1. если(img.src=»img/RoteAmpel.jpg»)

2. так что я должен сделать == ? когда я пишу, если(img.src==»img/RoteAmpel.jpg») это даже не меняет его ни разу

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

4. console.log(img.src, img.src == "img/RoteAmpel.jpg") это то, чего ты ожидаешь?

Ответ №1:

С вашим кодом есть две проблемы:

1. Присвоение и сравнение

Вы назначаете src вместо сравнения:

 if (img.src="img/RoteAmpel.jpg") { }

должно быть

 if (img.src === "img/RoteAmpel.jpg") { }

2. `img.src` возможно, это не то, чего вы ожидаете

При доступе img.src вы получите полный квалифицированный URL-адрес, включая протокол, домен и т. Д.

Чтобы сравнить фактическое значение атрибута, используйте это:

 img.getAttribute('src')

Вы можете проверить это сами:

 function test() {  var img = document.getElementById("b1")    console.log(img.src);  console.log(img.getAttribute('src'));  }   test();

 lt;img id="b1" src="img/RoteAmpel.jpg"gt;