how to change image onclick javascript function?

Question

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.

Solution 1

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

Solution 2

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

Solution 3

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)

Solution 4

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

View more solutions