如何使按钮消失并在“x”秒后重新出现？

Question

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?

Answer 1

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

Answer 2

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>

Answer 3

---

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>