admin管理员组文章数量:1325108
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...
Share Improve this question asked Apr 28, 2016 at 20:24 MartinMartin 1433 gold badges6 silver badges13 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
4 Answers
Reset to default 3here 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
版权声明:本文标题:javascript - Change image using event listener - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742131487a2422180.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论