How to return previous text after JS onclick function?

Question

My code is:

function changeText() { document.getElementById('button').innerHTML = 'Downloading...'; } 

Button:

 <button id = "button" onclick='changeText()' value='Change Text'>Download file as CSV</button> 

I want the button to change to “Download ...” and return to “Download as CSV” in a few seconds, is this possible in JS?

Answer 1

You can use setTimeout or on a successful asynchronous call:

 function changeText() { document.getElementById('button').innerHTML = 'Downloading...'; setTimeout(previousText, 1000); } function previousText() { document.getElementById('button').innerHTML = 'Download file as CSV'; } 

 <button id="button" onclick='changeText()' value='Change Text'>Download file as CSV</button> 

Answer 2

 document.getElementById("your-button").value="Downloading..."; setTimeout(function () { document.getElementById("your-button").value="Download as CSV"; }, 3000); 

The above code sets the button text, and then waits 3 seconds and after that sets the button text to another line.

Answer 3

This code will restore old text after 2000 ms, but you can set a timeout.

 function changeText() { var button = document.getElementById('button'); var oldText = button.innerHTML; button.innerHTML = 'Downloading...'; setTimeout(function(){ button.innerHTML = oldText; }, 2000); }