CODEWITHSUNDEEP
javascripthtml
Daniel Green
Daniel Green

Reputation: 1

How to make a button disappear and reappear after 'x' seconds?

How can I make this code;

 <input onclick="myFunction();" alt="click">Click Me!</button>

Hide for a few seconds, then re-appear after 'x' seconds? (This button works fine if that changes anything)

I'd like to stick with bare HTML, but if I need Javascript that's fine. No other solutions on SO work for me. Thanks.

edit: 

<link rel="stylesheet" type="text/css" href="formalign.css">
      <script type="text/javascript" src="trinit5.js"></script>
      <button class="button" id="btn" input onclick="doSingle();" alt="Summon">Summon</button>
      <img id="canvas"></img>
      <div class="element"></div>

where do i embed the part?

Upvotes: 0

Views: 6968

Answers (3)

Herco
Herco

Reputation: 342

Bare HTML won't do it I am afraid. You'll need a timer. Something like this maybe?

<button id="btn" onclick="tempInvisible(this);">Click</button>
            
    <script>
    function tempInvisible(btn) {
    
        btn.style.display = 'none';
    
        setTimeout(function() { 
            btn.style.display = 'block';
        }, 10000);
    
    }    
        
    </script>

Upvotes: 0

JSONaLeo
JSONaLeo

Reputation: 416

Hello my friend,

This can be accomplished fairly easily using a setTimeout in JavaScript. I've created a code snippet below which you can use as an example. You can change the number after the comma (1000) in the setTimeout to reflect how many thousandths of a second you want the button to have disappeared for.

Cheers and best of luck to you!

document.getElementById("button").onclick = function(){
  doSingle();
  document.getElementById("button").style.visibility = "hidden"
  setTimeout(function(){
    document.getElementById("button").style.visibility = "visible"
  }, 1000)
};
function doSingle() {
   // your function
};
<button class="button" id="button" alt="Summon">Summon</button>

Upvotes: 0

Uzair
Uzair

Reputation: 196

input tag(it is standalone tag) and a button tag(it is a paired tag) and if you want a button than you can try two things:

1- assign button to the type attribute

<input type="button" id="btn" onclick="myFunction()" value="Click Me">

2-use a button tag it also has type attribute but by default button is assigned to type attribute

<button id="btn" onclick="myFunction()">Click Me!</button>

Here in the js i have written a function JS:

<script>
    function myFunction()
    {
      document.getElementById('btn').style.display ='none'; //first hide the button
      setTimeout(function(){ //using setTimeout function
      document.getElementById('btn').style.display ='inline'; //displaying the button again after 3000ms or 3 seconds
    }
    ,3000); 
    }
</script>

NOTE: The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds. Tip: 1000 ms = 1 second. Tip: The function is only executed once

Upvotes: 1

Related Questions