CODEWITHSUNDEEP
javascripthtmlimagefunctionsrc
Arjun
Arjun

Reputation: 328

How to change source of image on click to one source and back to different source on same click

When the button is clicked the source of the image must be changed to something and when it is clicked again the source should be changed back to the previous one. Kind of like an animation of sort except that i control it with a button

the code which i have tried and failed is:

DOCTYPE html>
<html>
    <body>

        <img id="myImage" src="a.png" alt="a" border="0">

        <button type ="button" onclick="change()">Click Me</button>
    </body>

    <script>

        var x = document.getElementById("myImage")

        function change(){

            if x.src="a.png"

            document.getElementById("myImage").src = "b.png"

            else x.src="a.png"

        }
    </script>

</html>

What should i change in my code or is there a simpler code

Upvotes: 2

Views: 471

Answers (5)

Teocci
Teocci

Reputation: 8895

I think this is what you are locking at:

It took me so long to find the pictures, sorry ㅋㅋㅋ

var imgA = 'http://i.imgur.com/v5o8MW8.jpg'
var imgB = 'http://i.imgur.com/v1Vb6RR.jpg'

var x = document.getElementById("myImage")

function change() {
  x.src = (x.src == imgA ? imgB : imgA);
}
<body>
  <button type="button" onclick="change()">Click Me</button></br>
  <img id="myImage" src="http://i.imgur.com/v5o8MW8.jpg" alt="a" border="0">
</body>

Upvotes: 1

asprin
asprin

Reputation: 9823

Harikrishnan's way is one way of doing it. Another way would be by use of custom data-* attributes.

So your HTML would become:

<img id="myImage" data-change="b.png" src="a.png" alt="a" border="0">

And your Javascript would be:

function change(){
    var new_src = x.getAttribute('data-change'); // get the new source
    x.setAttribute("data-change", x.src); // set the custom attribute to current source
    x.src = new_src; // set the image source to new source
}

UPDATE

Just realized you had syntax error and a typo in your solution.

if x.src="a.png"
   document.getElementById("myImage").src = "b.png"
else x.src="a.png"

should become

if(x.src == "a.png")
   x.src = "b.png"
else
   x.src="a.png"

You were missing () in your if statement and also using a single = which will assign a value and not compare values.

Upvotes: 0

JPil
JPil

Reputation: 301

If you are trying to toggle the image you can just use a global variable as below:

       var x = 1;

        function change(){
            if (x == 1)
            {
               document.getElementById("myImage").src = "../Images/arrow.png";
               x = 0;
            }
            else 
            {
               document.getElementById("myImage").src="../Images/Add.png";
               x = 1;
            }

        }

Upvotes: 0

user4074041
user4074041

Reputation:

You forgot about ():

function change(){
            if (x.src="a.png")
            document.getElementById("myImage").src = "b.png"
            else x.src="a.png"

        }

MOAR: https://www.w3schools.com/js/js_if_else.asp

Upvotes: 0

Harikrishnan N
Harikrishnan N

Reputation: 874

Try this: 

        var x = document.getElementById("myImage")

        function change(){

            if (x.src == "a.png")
                 x.src = "b.png"
            else 
                 x.src = "a.png"

        }


    </script>

Can also do instead of if statement:

x.src = (x.src == "a.png" ? "b.png" : "a.png");

Upvotes: 1

Related Questions