admin管理员组

文章数量:1278881

I've got a button with an image inside that I want to swap when clicked. I got that part working, but now I also want it to change back to the original image when clicked again.

The code I'm using:

<button onClick="action();">click me<img src="images/image1.png" width="16px" id="ImageButton1"></button>

And the Javascript:

function action() {
  swapImage('images/image2.png');
};

var swapImage = function(src) {
  document.getElementById("ImageButton1").src = src;
}

Thanks in advance!

I've got a button with an image inside that I want to swap when clicked. I got that part working, but now I also want it to change back to the original image when clicked again.

The code I'm using:

<button onClick="action();">click me<img src="images/image1.png" width="16px" id="ImageButton1"></button>

And the Javascript:

function action() {
  swapImage('images/image2.png');
};

var swapImage = function(src) {
  document.getElementById("ImageButton1").src = src;
}

Thanks in advance!

  • javascript
  • html
Share Improve this question edited May 19, 2013 at 9:31 dda 6,2132 gold badges27 silver badges35 bronze badges asked May 19, 2013 at 9:22 JamesMJamesM 1012 gold badges3 silver badges11 bronze badges 2
  • stackoverflow./questions/10465082/… – user2319961 Commented May 19, 2013 at 9:27
  • 1 You forgot to ask a question. – nnnnnn Commented May 19, 2013 at 9:28
Add a ment  | 

4 Answers 4

Reset to default 2

While you could use a global variable, you don't need to. When you use setAttribute/getAttribute, you add something that appears as an attrib in the HTML. You also need to be aware that adding a global simply adds the variable to the window or the navigator or the document object (I don't remember which).

You can also add it to the object itself (i.e as a variable that isn't visible if the html is viewed, but is visible if you view the html element as an object in the debugger and look at it's properties.)

Here's two alternatives. 1 stores the alternative image in a way that will cause it to visible in the html, the other doesn't.

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}

window.addEventListener('load', mInit, false);

function mInit()
{
    var tgt = byId('ImageButton1');
    tgt.secondSource = 'images/image2.png';
}

function byId(e){return document.getElementById(e);}

function action() 
{
    var tgt = byId('ImageButton1');
    var tmp = tgt.src;
    tgt.src = tgt.secondSource;
    tgt.secondSource = tmp;
};

function action2()
{
    var tgt = byId('imgBtn1');
    var tmp = tgt.src;
    tgt.src = tgt.getAttribute('src2');
    tgt.setAttribute('src2', tmp);
}
</script>
<style>
</style>
</head>
<body>
    <button onClick="action();">click me<img src="images/image1.png" width="16px" id="ImageButton1"></button>
    <br>
    <button onClick="action2();">click me<img id='imgBtn1' src="images/image1.png" src2='images/image2.png' width="16px"></button>
    </body>
</html>

You need to store the old value in a global variable.

For example:

var globalVarPreviousImgSrc;
var swapImage = function(src)
{
   var imgBut = document.getElementById("ImageButton1");

   globalVarPreviousImgSrc = imgBut.src;
   imgBut.src = src;
}

Then in the action method you can check if it was equal to the old value

function action()
{
  if(globalVarPreviousImgSrc != 'images/image2.png')
  {
    swapImage('images/image2.png');
  }else{
    swapImage(globalVarPreviousImgSrc);
  }
}

It's not a good idea to use global variables in javascripts use a closure or object literal. You can do something like using a closure

(function(){
  var clickCounter = 0;
  var imgSrc1 = "src to first image";
  var imgSrc2 = "src to second image"
  functions swapImage (src)
  {
   var imgBut = document.getElementById("ImageButton1");
   imgBut.src = src;
  }

  function action()
  {
  if(clickCounter === 1)
  {
    swapImage(imgSrc1);
    --clickCounter;
  }else{
    swapImage(imgSrc2);
    ++clickCounter;
  }
}
})();

(I haven't run this code though)

This nice w3documentation gives you best practices.

Check this a working example just copy paste and run-

HTML

<button onClick="action();">click me<img src="http://dummyimage./200x200/000000/fff.gif&text=Image+1" width="200px" id="ImageButton1"></button>

JAVASCRIPT

<script>
function action()
{
if(document.getElementById("ImageButton1").src == 'http://dummyimage./200x200/000000/fff.gif&text=Image+1' )
document.getElementById("ImageButton1").src = 'http://dummyimage./200x200/dec4ce/fff.gif&text=Image+2';
else
document.getElementById("ImageButton1").src = 'http://dummyimage./200x200/000000/fff.gif&text=Image+1';
}
</script>

Check this working example - http://jsfiddle/QVRUG/4/

本文标签： javascriptChange image in button on clickStack Overflow

版权声明：本文标题：javascript - Change image in button on click - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741255866a2366658.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。