CODEWITHSUNDEEP
javascripthtml
G_ Sanster
G_ Sanster

Reputation: 23

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

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>

Upvotes: 1

Views: 5843

Answers (6)

Bezerra
Bezerra

Reputation: 146

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>

Upvotes: -1

jasinth premkumar
jasinth premkumar

Reputation: 1413

<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 .

Upvotes: 1

Tom&#225;s
Tom&#225;s

Reputation: 3561

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>

Upvotes: 1

Harshal Patil
Harshal Patil

Reputation: 20940

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.

Upvotes: 0

Just_Do_It
Just_Do_It

Reputation: 821

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

Upvotes: 0

Alex C
Alex C

Reputation: 526

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>

Upvotes: 5

Related Questions