All geek questions in one place

Changing the image in a button when pressed

I have a button with an image inside that I want to change when I click. I got this part of the work, but now I also want it to return to the original image again when pressed again.

The code I'm using is:

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

And Javascript:

 function action() { swapImage('images/image2.png'); }; var swapImage = function(src) { document.getElementById("ImageButton1").src = src; }

Thanks in advance!

+6
source share
4 answers

As long as you can use a global variable, you don't need to. When you use setAttribute / getAttribute, you add something that appears as an attribute in the HTML. You should also be aware that adding a global just adds a variable to a window or navigator or document object (I don’t remember which one).

You can also add it to the object itself (i.e., as a variable that is not visible if the html is viewed, but displayed if you are viewing the html element as an object in the debugger and look at its properties.)

There are two alternatives. 1 saves the alternate image so that it is visible in html and the other does not.

 <!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>
+1
source

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

For instance:

 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); } }
0
source

Check out this working example, just copy the paste and run -

HTML

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

JAVASCRIPT

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

Check out this working example http://jsfiddle.net/QVRUG/4/

0
source

Using global variables in javascripts is not recommended using a closure or object literal. You can do something like using 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 yet)

This enjoyable w3documentation gives you the best practices.

0
source

Source: https://habr.com/ru/post/945348/

More articles:


All Articles