Delay when a button is clicked?

Question

I would like to know if I can delay the action of a button in html, so when I click a button, it comes up with an animation or a picture saying; Please Wait... for 1 or 2 seconds, then execute the code? This is a small part of my code that I want to delay;

<button onclick="myFunction()">Summon</button>
<p id="demo"></p>
<script>
function myFunction()
{
    var luck= ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'],
    lucknumber = Math.floor((Math.random() * luck.length));

    if (lucknumber < 14){
        document.getElementById("demo").innerHTML = "SR";
    } 
    else {
        document.getElementById("demo").innerHTML = "SSR";
        }
}
</script>

Yeah, it's a basic code but I am a beginner, so any answers will be really appreciated! Thank you!

Possible duplicate of [Sleep in JavaScript - delay between actions](https://stackoverflow.com/questions/758688/sleep-in-javascript-delay-between-actions) — takendarkk, Jan 30 '18 at 22:03

Luis Horacio · Accepted Answer · 2018-01-31T15:40:59.087

1

You can use a timeout for your function

...
var inner = "SSR";
if (lucknumber < 14){
  inner = "SR";
}

setTimeout(function(){ 
  document.getElementById("demo").innerHTML = inner;
}, 2000);

...

edited Jan 31 '18 at 15:40

answered Jan 30 '18 at 22:04

Luis Horacio

26
5

thank you! but i'm having trouble embedding this code onto my piece of code, I don't know where to put where. If it's not too much of a problem, could you point me in the right direction? :D thanks! – moon river. Jan 30 '18 at 22:16
In your if statement, before `document`. Instead of `alert()` replace it with `document.getElementById()` `3000` is **milliseconds**. – Vladimir Jovanović Jan 30 '18 at 22:21

Delay when a button is clicked?

1 Answers1