javascript - Change image using event listener - Stack Overflow

admin管理员组

文章数量:1324904

I have two images: images/pic1.png and images/pic2.png. And I want to make something like this: When I click on image(pic1) for the first time it changes its src to images/pic2.png and then 2nd image is displayed. Next, I click again (2nd time), and my first image is displayed again. And if I click for the third time my 2nd img is displayed again. And again and again and again.

Also, I'd like to make it with loop if(...) ... else{...}.

Here's my code:

HTML

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

JS

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";}});

I do not know what else to do...

I have two images: images/pic1.png and images/pic2.png. And I want to make something like this: When I click on image(pic1) for the first time it changes its src to images/pic2.png and then 2nd image is displayed. Next, I click again (2nd time), and my first image is displayed again. And if I click for the third time my 2nd img is displayed again. And again and again and again.

Also, I'd like to make it with loop if(...) ... else{...}.

Here's my code:

HTML

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

JS

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";}});

I do not know what else to do...

• javascript
• html
• css

Share Improve this question Follow asked Apr 28, 2016 at 20:24 MartinMartin 14333 gold badges66 silver badges1313 bronze badges 7

• 2 And I do not know what exactly you're saying the problem might be? – Hari Lubovac Commented Apr 28, 2016 at 20:28
• I don't see a question. What's your problem exactly? – Michael Schwartz Commented Apr 28, 2016 at 20:33
• maybe the problem is relative vs absolute URLs? – imvain2 Commented Apr 28, 2016 at 20:39
• it seems he have a problem with paths, // before your root folder – Hatem Ahmed Commented Apr 28, 2016 at 20:42
• it doesnt not works and I don't know why – Martin Commented Apr 28, 2016 at 20:46

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 3

here is a working example that shows your code works fine. Unless you are having a problem because of ABSOLUTE VS RELATIVE URLS.

var img = document.getElementById("myImage");
img.addEventListener("click", function(){
  if(img.src != "http://placehold.it/350x150/ff0000"){
    img.src = "http://placehold.it/350x150/ff0000";}
  else{
    img.src = "http://placehold.it/350x150";}});

<img src="http://placehold.it/350x150" id="myImage"/>

I have created this small jsfiddle

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

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

Another way is to use the dataset Attribute as id.

That would allow you also to change between more images.

function toggle(){
 img.src='images/pic'+(
  img.dataset['id']=img.dataset['id']++<2?img.dataset['id']:1
 )+'.png';
 img.alt='images/pic'+(img.dataset['id'])+'.png';
}
var img=document.getElementById('myImage');
img.onclick=toggle;

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

in the above case 2 is the maximum and 1 is the first image

img.dataset['id']=img.dataset['id']++<2?img.dataset['id']:1

Readable:

if( img.dataset['id']<2 ){
 img.dataset['id'] + 1;
}else{
 img.dataset['id'] = 1;
}

HYG you need to empty the src before inserting a new one

var img = document.getElementById("myImage");
img.addEventListener("click", function(){
console.log(img.src);
  if(img.src != "https://placeholdit.imgix/~text?txtsize=33&txt=pic2"){
  console.log("not true");
    img.src = "";
    console.log(img.src);
    img.src="https://placeholdit.imgix/~text?txtsize=33&txt=pic2";
    }
  else{
    img.src = "https://placeholdit.imgix/~text?txtsize=33&txt=pic1";}});

<img src="https://placeholdit.imgix/~text?txtsize=33&txt=pic1" id="myImage"/>

本文标签： javascriptChange image using event listenerStack Overflow