CODEWITHSUNDEEP
javascriptjqueryhtml
Ruxie
Ruxie

Reputation: 69

Remove class from a button with delay after a class has been added with javascript

I'm sorry if this is a beginner question, but after hours of trying other answers here on StackOverflow, I thought I might ask the question myself.

I am currently working on a website for my project and I wanted the download button to say "Download Started" after it's been clicked to let the user know the download is working. I have achieved the following using this code:

<script>
function downloadBtn(dlbtn)
{
document.getElementById("download").innerHTML = dlbtn;
var element = document.getElementById("download");
element.classList.add("btn-download-started");
}
</script>

Which should add a class 'btn-download-started' to this link:

<a class="btn btn-download" href="#downloadlink"  id="download" onclick="downloadBtn('download starting...')">Download</a>

But I would like to have the button become active again after a few seconds in case the user accidentally stops the download etc.

How would be the best way to do this? I have also got jQuery installed currently.

Thank you in advance for your help! I really appreciate it!

Upvotes: 1

Views: 95

Answers (1)

RAJNIK PATEL
RAJNIK PATEL

Reputation: 1049

Use this for active button again after 20 Seconds.

<script>
  function downloadBtn(dlbtn)
  {
    document.getElementById("download").innerHTML = dlbtn;
    var element = document.getElementById("download");
    element.classList.add("btn-download-started");

    setTimeout(function () {
      element.classList.remove("btn-download-started");  
    }, 20000); // 20 Seconds
  }
</script>

Upvotes: 1

Related Questions