How to return the previous text after an onclick JS function?

Question

My code is:

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

The button:

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

I want the button to change to "Downloading..." then return to "Download as CSV" a few seconds after, is this possible in JS?

Answer 1

You can use setTimeout or on success of your 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's text, and then waits 3 seconds and after that sets the button text to another string.

Answer 3

This code will restore the old text after 2000ms, but you can customize the timeout.

function changeText() {
    var button = document.getElementById('button');

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