CODEWITHSUNDEEP
javascript
user339946
user339946

Reputation: 6119

Javascript simple onclick image swap

I am trying to use Javascript to swap an image, so far I can get it from A to B, but not back.

Here is what I'm using to create one swap:

<img src="pic1.png" name="pic" onclick="window.document.pic.src='pic2.png';"/>

This swaps image 1 to image 2, simple enough. But I want to be able to revert back to image 1 by clicking on the new image 2. I tried using this:

<img src="pic1.png" name="pic" onclick="
if (window.document.pic.src='pic1.png'){
window.document.pic.src='pic2.png';
} 
else if (window.document.pic.src='pic2.png'){
window.document.pic.src='pic1.png';
}"/>

It doesn't seem to work in this instance. It will switch to pic2, but not switch back to pic1. Is it something to do with onclick? My if statements? Thanks

Upvotes: 4

Views: 92042

Answers (6)

Tayyab Qureshi
Tayyab Qureshi

Reputation: 1

You can try this.

<html>
<head>
<title>Swapping Images</title>
</head>
<body>
<img id="myimg" src="img1.jpg" hieght="300" width="300" onClick="change ()"/>
</body>
</html>
<html>
<head>
<script>
function change () {
  var img=document.getElementById("myimg");
  if (img.src === "img1")
    img.src="img2.jpg";
  else 
    img.src="img1.jpg";
}
</script>
</head>
</html>

Upvotes: -4

Ed Haack
Ed Haack

Reputation: 121

Try this simple trick... easy to maintain.

<script>
var onImg= "on.jpg";
var offImg= "off.jpg";
</script>
<img src="on.jpg" onclick="this.src = this.src == offImg ? onImg : offImg;"/>

Upvotes: 12

Shafquat
Shafquat

Reputation: 1

Your code is doing what the below lines do, it's not going inside an if else block, so if you remove your if else block the code still will work, because on mouse click it sets the value of src as 'pic2.png', which was 'pic1.png' earlier, and when you click again because it's already pic2.png so it remains the same.

<html>
<head>
<script type="text/javascript">

function swap() {
    window.document.pic.src='pic2.png';
}
</script>

</head>
<body>
<img src="pic1.png" name="pic" onclick="swap()"> 
</body>
</html>

Upvotes: 0

Nivas
Nivas

Reputation: 18334

  1. window.document.pic.src='pic1.png' assigns pic1.png to the left hand side. It does NOT compare.

  2. Though not directly relevant, try not to access elements by their name globally. Use their id.

  3. Your javascript should not be inside the onclick. It should be inside a javasctipt function

Combined:

The img tag:

<img src="pic1.png" name="pic" id="pic" onclick="swap()"/>

The javascript

<script>
function swap()
{
   if (document.getElementById("pic").src.endsWith('pic1.png') != -1)  //==:Comparison
   { 
      document.getElementById("pic").src = "pic2.png"; //=:assignment   
   } 
   else if (window.document.pic.src.endsWith('pic2.png') != -1) 
   { 
      document.getElementById("pic").src = "pic1.png"; 
   }
}
</script>

Upvotes: 1

Bhanu Prakash Pandey
Bhanu Prakash Pandey

Reputation: 3785

In your code the problem is when you alert window.document.pic.src its print like http://localhost/pic1.png and then you are are use condition if (window.document.pic.src == 'pic1.png') how is it true. try this

<script type="text/javascript">
function test()
{
    alert(window.document.pic.src);
     //alert msg print like http://localhost/test/pic1.png
    if (document.pic.src=='http://localhost/test/pic1.png'){

document.pic.src='pic2.png';
} 
else if (document.pic.src=='http://localhost/test/pic2.png'){

document.pic.src='pic1.png';
}
}
</script>
<img src="pic1.png" name="pic" onclick="test()"/>

Upvotes: 2

Shakti Singh
Shakti Singh

Reputation: 86386

wrong use of == in if condition 

if (window.document.pic.src == 'pic1.png'){
window.document.pic.src='pic2.png';
} 
else if (window.document.pic.src =='pic2.png'){
window.document.pic.src='pic1.png';
}"/>

Upvotes: 2

Related Questions