how to change image onclick javascript function?

I got a problem, I tried several times but result is always same, I don't know what's wrong with my code. If you click on right image, it will change to left image, but if you click on left image, it wont change to right image, why? here is code:

    function changeImage() {

    if  (document.getElementById("changer").src == "imgs/left.gif")
    {
        document.getElementById("changer").src = "imgs/right.gif";
    }
    else 
    {
        document.getElementById("changer").src = "imgs/left.gif";
    }

}

and image src code here:

<img  src="imgs/right.gif" id="changer" onclick="changeImage()"/></a>

I need this function: click on (right arrow image), then it'll change to (left arrow image) and click on same (left arrow image) again will return to default, (right arrow image).

Thank you in advance for your time and help.

As explained by Prabu in his answer that the actual src is absolute path but not relative path.

To solve this:

Pass the element object i.e this as argument to the function.
Create a variable bln inside the element object i.e element in that function.

<img src="imgs/right.gif" id="changer" onclick="changeImage(this)" />
                                                             ^ pass the element object

 function changeImage(element) {
     element.src = element.bln ? "imgs/right.gif" : "imgs/left.gif";
     element.bln = !element.bln;  /* assigns opposite boolean value always */
 }

The above function will toggle the image src's without depending on the value present inside the src property.

Sample Fiddle

BTW, You can also do this using just CSS:

Working Fiddle

Hey problem is you mentioned foldername/filename but document.getElementById("changer").src giving fullpath like C:\Users\ws21\Desktop\imgs\right.gif

For example

 function changeImage() {

//its checking C:\Users\ws21\Desktop\imgs\right.gif=="imgs\left.gif"
        if  (document.getElementById("changer").src == "imgs/left.gif")
        {
            document.getElementById("changer").src = "imgs/right.gif";
        }
        else 
        {
            document.getElementById("changer").src = "imgs/left.gif";
        }

    }

So it always execute else part only

Try this :

$("#changer").click(function(){
    imagePath = $("#changer").attr("src");
    if(imagePath == "http://behdasht.co/wp/imgs/left.gif"){
        $("#changer").attr("src", "http://behdasht.co/wp/imgs/right.gif");

    }else{
        $("#changer").attr("src", "http://behdasht.co/wp/imgs/left.gif");
    }
});

//Updated to use jquery completely

Fiddle : http://jsfiddle.net/8hGWZ/

http://jsfiddle.net/8hGWZ/2/ (Full jquery)

function changeImage() {
    var src = document.getElementById("changer").src;   
var imgsrc = src.substring(src.lastIndexOf("/")+1);
if  (imgsrc == "left.gif")
{
    document.getElementById("changer").src = "imgs/right.gif";
    console.log('if'+document.getElementById("changer").src);
}
else 
{
    document.getElementById("changer").src = "imgs/left.gif";
    console.log('if'+document.getElementById("changer").src);
}

}

USE THE ABOVE SHOULD WORK

FIDDLE DEMO

What you've got should work.

Here's a shorter version:

function changeImage() {
    this.src = this.src == "imgs/left.gif" ? "imgs/right.gif" : "imgs/left.gif";
}

DEMO

HTML

<a/>
<img src="imgs/right.gif" id="changer" onclick="changeImage(this)" />
</a>

i=1;
function changeImage(el) {
    el.click=++i;
    el.src = ((el.click)%2 == 0) ? "imgs/right.gif" : "imgs/left.gif";
}

Hey try complete path for the images in the javascript like

if  (document.getElementById("changer").src == "http://mydomain.com/imgs/left.gif")
{
    document.getElementById("changer").src = "http://mydomain.com/imgs/right.gif";
}

Some browsers use complete url in src

Or u can check this

  <img  src="http://behdasht.co/wp/imgs/right.gif" id="changer" onclick='javascript: this.src = this.src == "http://behdasht.co/wp/imgs/left.gif" ? "http://behdasht.co/wp/imgs/right.gif" : "http://behdasht.co/wp/imgs/left.gif";'/>

PROBLEM IS SOLVED. HERE IS COMPLETE ANSWER: WE SHOULD USE FULL PATH OF IMAGE URL OTHERWISE IT WONT WORK.

 function changeImage() {
    if  (document.getElementById("changer").src == "HTTP://YOURDOMAIN/left.gif")
    {
        document.getElementById("changer").src = "HTTP://YOURDOMAIN/right.gif";
    }
    else 
    {
        document.getElementById("changer").src = "HTTP://YOURDOMAIN/left.gif";
    }

}

Especial thanks to Prabu Parthipan

THERE IS ANOTHER METHOD :

<img src="imgs/right.gif" id="changer" onclick="changeImage(this)" />

if we use (this) , then no need to use full path of image url. In this case I should say thanks to MR GREEN ... !

来源：https://stackoverflow.com/questions/18502734/how-to-change-image-onclick-javascript-function

标签

jquery

image

function

onclick

onchange