发表新帖
发表新帖

Javascript simple onclick image swap

前端 未结
关注
6 1711
终归单人心
终归单人心 2020-12-19 18:47

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:
相关标签:
6条回答
  • 臣服心动
    2020-12-19 19:28

    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>
    0 讨论(0)
  • 说谎
    2020-12-19 19:34

    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()"/>
    0 讨论(0)
  • 野性不改
    2020-12-19 19:35

    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>
    0 讨论(0)
  • 小蘑菇
    2020-12-19 19:39

    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>
    0 讨论(0)
  • 暖寄归人
    2020-12-19 19:43

    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;"/>
    0 讨论(0)
  • 灰色年华
    2020-12-19 19:45

    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';
}"/>
    0 讨论(0)
 看不清?
提交回复
热议问题