CODEWITHSUNDEEP
javascript
Amg
Amg

Reputation: 123

Reset after defined time to original state

I have this code that I'd like to reset after 3 seconds. 

<!DOCTYPE html>
    <html>
    
    <head>
        <script>
            function bla() {
                document.getElementById("bla").innerHTML = " to bla bla.";
            }
    
            document.getElementById('bla').reset()
        </script>
    </head>
    
    <body>
        <h1>A Web Page</h1>
        <p id="bla">From bla bla
        </p>
        <button type="button" onclick="bla()">Press </button>
    </body>
    
    </html>

I have this 

document.getElementById
('bla').reset()

But not sure how to implement it with a specific time period reset.

Upvotes: 2

Views: 249

Answers (5)

J. Lee
J. Lee

Reputation: 533

In the setTimeout function, you need to specify the code to "reset" your element. For example, if you want to remove the text inside of the DOM element, you would do something like the following

setTimeout(function() {
    document.getElementById("bla").innerHTML = ''; // remove text in "#bla"
}, 2000); // reset element after 2 seconds

Overall, I think it would make things easier for people to answer your question if you specify exactly what you mean by "reset".

updated answer: If you want to restore text to its original value, you need to store the original value in a variable. Something like the following:

var originalState = " to bla bla."
setTimeout(function() {
    document.getElementById('bla').innerHTML = originalState; // restore to original state
}, 2000); // trigger after 2000 milliseconds

Upvotes: 2

Tinu Jos K
Tinu Jos K

Reputation: 920

Try this code, and it's better to put your scripts in the last of the body 

<!DOCTYPE html>
        <html>
        
        <head>
        
        </head>
        
        <body>
            <h1>A Web Page</h1>
            <p id="bla">From bla bla
            </p>
            <button type="button" onclick="bla()">Press </button>
        
            <script>
                var element = document.getElementById('bla');
        
                function bla() {
                    element.innerHTML = " to bla bla.";
                }
        
                function reset() {
                    element.innerHTML = "";
                }
        
                setTimeout(reset, 3000);
            </script>
        </body>
        
        </html>

Upvotes: 0

Purnima Bhatia
Purnima Bhatia

Reputation: 67

write your Script as:

    <script>
            function bla() {
                    document.getElementById("bla").innerHTML = " to bla bla.";

                    setTimeout (function()
                            {
                               document.getElementById('bla').innerHTML = "";
                            },3000);
                    }
    </script>

Upvotes: 0

Rashed Hasan
Rashed Hasan

Reputation: 3751

You can try this -

function bla() {
    let x = document.getElementById("bla").innerHTML;
    document.getElementById("bla").innerHTML = " to bla bla.";

    setTimeout(function () {
      document.getElementById('bla').innerHTML = x;
    }, 3000);
}

Upvotes: 2

AlainIb
AlainIb

Reputation: 4728

use setTimeout

https://www.w3schools.com/jsref/met_win_settimeout.asp

setTimeout(function(){ 
   // the function the want to call after timeout
}, 3000);

3000 is the time in millisecond, so 3 seconds

Upvotes: 1

Related Questions