All geek questions in one place

Change the button image after clicking to “download” and then with another image after 10 seconds

All day I struggled with this, and I got to the point where my code wasn’t working at all! I am trying to do this:

When the user clicks ImageButton1 , this image is replaced by another Image of LoadingImg , and then after 10 seconds this image is replaced by another image / ImageButton2 button

Here is my non-functional code:

 <img src="images/xboxsite_14.gif" id="ImageButton1" onClick="showLoad()"> <img src="images/getld.png" id="ImageButton2" alt="Get Last Digits" style="display:none;"> <img src="images/Loader.gif" id="LoadingImg" style="display:none;"> <script type="text/javascript" language="javascript"> function showLoad() { document.getElementById('ImageButton1').src=document.getElementById('LoadingImg').src; document.getElementById('LoadingImg').style.display='block'; setTimeout(swapImageSrc, 1000); }​ function swapImageSrc() { document.getElementById('LoadingImg').src = document.getElementById('ImageButton2').src; document.getElementById('LoadingImg').style.display='none'; document.getElementById('ImageButton2').style.display='block'; document.getElementById('Code1String').style.display='block'; } </script>

The only thing I can think of is that I changed the charset from 'charset = iso-8859-1' to 'charset = UTF-8', because I accidentally got the error 'unsupported characters' (they are not there).

If anyone can fix this, I will be very grateful, thanks!

0
source share
3 answers

I cleared your logic. http://jsfiddle.net/3ySkE/

 function showLoad() { document.getElementById('ImageButton1').src = document.getElementById('LoadingImg').src; setTimeout(swapImageSrc, 1000); } function swapImageSrc() { document.getElementById('ImageButton1').src = document.getElementById('ImageButton2').src; }​
0
source

It works...

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script language="javascript"> function showLoad() { document.getElementById('ImageButton1').src = ''; document.getElementById('LoadingImg').src = 'images/Loader.gif'; setTimeout(swapImageSrc, 10000); } function swapImageSrc() { document.getElementById('LoadingImg').src = ''; document.getElementById('ImageButton2').src = 'images/getld.png'; document.getElementById('Code1String').style.display='block'; } </script> </head> <body> <img src="images/xboxsite_14.gif" id="ImageButton1" onclick="showLoad()"> <img src="" id="ImageButton2"> <img src="" id="LoadingImg"> </body> </html>
0
source

Maybe I'm wrong, but maybe this is what you need, cleaner code can help you debug your problem:

 <img src="images/xboxsite_14.gif" id="ImageButton1" onClick="action();"> <script type="text/javascript" language="javascript"> function action() { swapImage('images/getld.png') ; window.setTimeout(function () { swapImage('images/Loader.gif') }, 1000) }; var swapImage = function(src) { document.getElementById("ImageButton1").src = src; } </script>
0
source

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

More articles:


All Articles