Javascript 使用事件侦听器更改图像

我有两张图片：

images/pic1.png

和

images/pic2.png

。我想做这样的事情： 当我第一次单击图像（pic1）时，它将其

src

更改为

images/pic2.png

，然后显示第二个图像。接下来，我再次单击（第二次），我的第一个图像再次显示。如果我第三次单击，我的第二个img将再次显示。一次又一次

另外，我想使用loop

if（…）。。。否则{…}

这是我的密码：

HTML

<img src="images/pic1.png" id="myImage"/>

---

我不知道还能做什么…

下面是一个工作示例，它显示您的代码工作正常。除非你有一个问题，因为绝对相对网址

var img=document.getElementById（“myImage”）；
img.addEventListener（“单击”，函数（）{
如果（img.src！“http://placehold.it/350x150/ff0000"){
img.src=”http://placehold.it/350x150/ff0000";}
否则{
img.src=”http://placehold.it/350x150";}});
下面是一个工作示例，显示您的代码工作正常。除非你有一个问题，因为绝对相对网址


var img=document.getElementById（“myImage”）；
img.addEventListener（“单击”，函数（）{
如果（img.src！“http://placehold.it/350x150/ff0000"){
img.src=”http://placehold.it/350x150/ff0000";}
否则{
img.src=”http://placehold.it/350x150";}});
我创建了这个小


var img=document.getElementById（“myImg”）；
img.addEventListener（“单击”，函数（）{
if（this.classList.contains（'changed'））{
this.src='/i.imgur.com/COFscX6.jpg'；
this.className=“”；
}否则{
this.className=“已更改”；
this.src=“//i.imgur.com/rznnhRq.jpg”；
}
});
我创建了这个小


var img=document.getElementById（“myImg”）；
img.addEventListener（“单击”，函数（）{
if（this.classList.contains（'changed'））{
this.src='/i.imgur.com/COFscX6.jpg'；
this.className=“”；
}否则{
this.className=“已更改”；
this.src=“//i.imgur.com/rznnhRq.jpg”；
}
});
另一种方法是使用as id

这将允许您在更多图像之间切换


函数切换（）{
img.src='images/pic'+(
img.dataset['id']=img.dataset['id']++另一种方法是使用as id

这将允许您在更多图像之间切换


函数切换（）{
img.src='images/pic'+(
img.dataset['id']=img.dataset['id']+++HYG您需要在插入新的src之前清空src


var img=document.getElementById（“myImage”）；
img.addEventListener（“单击”，函数（）{
console.log（img.src）；
如果（img.src！“https://placeholdit.imgix.net/~text？txtsize=33&txt=pic2”）{
console.log（“不正确”）；
img.src=“”；
console.log（img.src）；
img.src=”https://placeholdit.imgix.net/~text？txtsize=33&txt=pic2”；
}
否则{
img.src=”https://placeholdit.imgix.net/~text？txtsize=33&txt=pic1”；}}）；
HYG在插入新的src之前，您需要清空src


var img=document.getElementById（“myImage”）；
img.addEventListener（“单击”，函数（）{
console.log（img.src）；
如果（img.src！“https://placeholdit.imgix.net/~text？txtsize=33&txt=pic2”）{
console.log（“不正确”）；
img.src=“”；
console.log（img.src）；
img.src=”https://placeholdit.imgix.net/~text？txtsize=33&txt=pic2”；
}
否则{
img.src=”https://placeholdit.imgix.net/~text？txtsize=33&txt=pic1”；}}）；
我不知道你到底在说什么问题？我看不到问题。你到底有什么问题？可能是相对URL和绝对URL的问题？他似乎有路径问题，//在你的根文件夹不工作之前，我不知道为什么，我也不知道你到底在说什么问题？我看不出有什么问题。你到底有什么问题？可能是相对URL和绝对URL的问题？似乎他在路径方面有问题，//在你的根folderit不工作之前，我不知道为什么会出现问题！我不知道为什么它在这里不工作。我可以将此代码放在onload函数中吗？你可以尝试一下。你可以尝试的另一个测试是
console.log（img.src）；
在click函数的开头，查看它的确切说明是什么src。如果它有完整的url，你就会知道这是问题所在。谢谢！我不知道为什么它在这里不起作用。我可以将此代码放在onload函数中吗？你可以试试。你可以尝试的另一个测试是
console.log（img.src）
在单击函数的开头，查看它的确切说明是src。如果它有完整的url，您就会知道这是问题所在。
var img = document.getElementById("myImage");
img.addEventListener("click", function(){
  if(img.src != "images/pic2.png"){
    img.src = "images/pic2.png";}
  else{
    img.src = "images/pic1.png";}});

<img id='myImg' width='40px' height='40px' src="//i.imgur.com/COFscX6.jpg" />

var img = document.getElementById("myImg");
img.addEventListener("click", function() {
  if (this.classList.contains('changed')) {
    this.src = '//i.imgur.com/COFscX6.jpg';
    this.className = "";
  } else {
    this.className = "changed";
    this.src = "//i.imgur.com/rznnhRq.jpg";
  }
});