How to make a button that will only appear after 5 seconds using Javascript?

Question

The title pretty much says it all: I need help in making a button that will only appear 5 seconds after the page loads.

this is the code i'm working with:

                <html>
                <body onload="setTimeout(showStuff, 5000)">

                        <br><br><br><br><br><br><br><br><br><br><br><br><br>        
                        <div class=login align=center>
                        <font size=13 face=helvetica> You're doing that too much. </font><br> <br> <br>
                        <font size=5 face=helvetica>
                        You have entered the wrong username/password too many times <br>
                        <br><br>
                        <br><br>
                        Click "OK" to go back to the log-in page <br> <br>
                        <p id="Button"><input type=submit onclick="myFunction()" id="Button" value="OK"> </p>

                        <script>
                        document.getElementById("Button").style.visibility = "hidden";

                        function showStuff(Button){
                        document.getElementById("Button").style.display = "inline";}

                        function myFunction() {
                            window.location = "project.html"}


                        </script>
            </div> </font>
                </body>
            </html>

Where is your button? So you have code that runs after 10 milliseconds.... Adjust it to be 5 seconds. — epascarello, Apr 03 '18 at 17:54
Your code does not work because you have two elements with the same id. — epascarello, Apr 03 '18 at 17:58
You really should not use the font tag, that has been removed from HTML for ages. — epascarello, Apr 03 '18 at 17:59
https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element — epascarello, Apr 03 '18 at 18:06

score 4 · Answer 1 · answered Apr 03 '18 at 18:00

This is probably what you need

<body>


    <button id="some-button">button</button>
    <script>
        document.getElementById("some-button").style.display = "none";

        function showStuff() {
            document.getElementById("some-button").style.display = "inline";
        }

        function myFunction() {
            window.location = "project.html"
        }

        setTimeout(showStuff, 5000);
    </script>
</body>

</html>

jasinth premkumar · Answer 2 · 2018-04-04T11:56:21.283

<script> 
function showStuff(){ // no argument needed
                            document.getElementById("Button").style.display = "inline";
    }   
</script>

<body onload="javascript:setTimeout(function(){ showStuff(); }, 5000)">

function definition should be before function call in function showstuff no argument is needed. a use function() inside settimeout to execute correctly . if not it will just execute without delay .

Tomas Prado · Answer 3 · 2018-04-03T18:27:21.943

Things you should know
* The html element <font> is deprecated
* Is bad practice to mix Javascript code inline with html.
* Do not duplicate html elements ids, they should be unique (Thanks Calvin Nunes)

How to fix your code
* Close the second <font> element correctly and delete the unnecesary id of the button.
* If you use display = 'inline', then to hide the element use display = 'none'

The working code

            <html>
            <body onload="setTimeout(showStuff, 5000)">

                    <br><br><br><br><br><br><br><br><br><br><br><br><br>        
                    <div class=login align=center>
                    <font size=13 face=helvetica> You're doing that too much. </font><br> <br> <br>
                    <font size=5 face=helvetica>
                    You have entered the wrong username/password too many times <br>
                    <br><br>
                    <br><br>
                    Click "OK" to go back to the log-in page <br> <br> 
                    </font>
                    <p id="Button">
                       <input type=submit onclick="myFunction()" value="OK"> </p>


              <script>

                    document.getElementById("Button").style.display= "none";

                    function showStuff(){
                        document.getElementById("Button").style.display = "inline";
                    }

                    function myFunction() {
                        window.location = "project.html"
                    }


                    </script>
            </body>
        </html>

Please, also fix the error that OP have, he's using the same `ID` on two different elements, check the `p` and the `input` — Calvin Nunes, Apr 03 '18 at 18:08

Just_Do_It · Answer 4 · 2018-04-03T18:03:34.570

0

Well using jquery you can have the button within the div, something like <div id="div_id">Button here</div> and set time out to display it

setTimeout(function(){
   $('#div_id').show();// or fade, css display however you'd like.
}, 5000);`

or with Javascript:

function showItbutton() {
  document.getElementById("div_id").style.visibility = "visible";
}
setTimeout("showItbutton()", 5000); // after 5 secs

edited Apr 03 '18 at 18:03

answered Apr 03 '18 at 17:56

Just_Do_It

765
6
18

this would require jquery - OP didn't add the tag... adding a full library only to have this functionality is not recommended – blurfus Apr 03 '18 at 17:59
no, it didn't require jQuery... can't you just use setTimeout with a style change on display? – Calvin Nunes Apr 03 '18 at 18:02
Guys please be patient before down voting let the person make updates. Wonder why in such a hurry ? – Just_Do_It Apr 03 '18 at 18:04

Bezerra · Answer 5 · 2018-04-04T19:27:08.137

0

setTimeout() receives milliseconds, not seconds. So 5000 it will work for you.

JS:

setTimeout(showStuff, 5000);
console.debug('Start page');
function showStuff(Button){
    console.debug('Display');
    document.getElementById("Button").style.display = "inline";
}

HTML:

<button id="Button" style="display:none">Button</button>

edited Apr 04 '18 at 19:27

answered Apr 03 '18 at 18:02

Bezerra

137
8

1

don't answer pointing a link to another website unless it is impossible to add the code here. (and he wants 5 secods, not 10) :) – Calvin Nunes Apr 03 '18 at 18:04
Welcome to StackOverflow. Link-only answers are not very useful once the linked page disappears (it happens often) - for that reason, it is encouraged to grab the relevant bits and place them into your answer (with correct credits to the author as you have done) - this way your answer becomes self-sufficient. – blurfus Apr 03 '18 at 18:30
Now it's fixed guys. Sorry about it. – Bezerra Apr 04 '18 at 19:28

score 0 · Answer 6 · answered Apr 03 '18 at 18:08

First, use DOMContentLoaded event and then write the code within that handler to handle this logic:

<script>
    window.addEventListener('DOMContentLoaded', () => {
        setTimeout(() => {
            // Assuming button has id 'myButton'.
            document.querySelector('#myButton').style.display = 'none';
        }, 5000);
    });
</script>

Remember DOMContentLoaded is the key to detect page load. You can use onload depending on your situation. Refer this to understand the difference between the two.

How to make a button that will only appear after 5 seconds using Javascript?

6 Answers6