CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user23524697
user23524697

Reputation: 147

How Can I Display a Message Box That Has No Buttons, and That Disappears After a Specified Period of Time?

I have this short code:

<!DOCTYPE html>
<html>
<body>

<button onclick="addedSuccess()">Add to Cart</button>

<p id="demo"></p>




</body>
</html>

<script>
function addedSuccess() {
    document.getElementById("demo").innerHTML = "Item added successfully in Cart";
}
</script>

Is there a way to make the message disappear after a given period of time? I want the message to show every time the user would click on "add to cart" then disappear after a period of time without having to worry about pressing on a button to make it go away... Is there a way of doing this? Thanks a lot!

Upvotes: 1

Views: 1746

Answers (3)

Navneet Garg
Navneet Garg

Reputation: 1374

use JavaScript function setTimeout() 

setTimeout(function,milliseconds,param1,param2,...)

setTimeout(function() {
      document.getElementById("demo").style = "display:none";
}, 3000);

Or if you want to do with jquery try this

$( "#demo" ).delay( 3000 ).hide(0);

Upvotes: 1

Nishit Maheta
Nishit Maheta

Reputation: 6031

use below code . use setTimeout function .here 3000 meaning 3 seconds. you can change seconds as per your requirement.

The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds.1000 ms = 1 second.

  <script>
    function addedSuccess() {
       document.getElementById("demo").style = "display:block";
       document.getElementById("demo").innerHTML = "Item added successfully in     Cart";
       setTimeout(function() {
         document.getElementById("demo").style = "display:none";
       }, 3000);
    }
 </script>

or use below code to clear text 

 <script>
     function addedSuccess() {
       document.getElementById("demo").innerHTML = "Item added successfully in     Cart";
       setTimeout(function() {
         document.getElementById("demo").innerHTML = "";
       }, 3000);
     }
 </script>

if you want to use jquery then use below code . see DEMO

 <!DOCTYPE html>
   <head> 
     <script src="http://code.jquery.com/jquery-latest.min.js"
    type="text/javascript"></script>
     <script>
       $(document).ready(function(){
         $(document).on('click','#addtocart',function(){
            $('#demo').html('Item added successfully in Cart');
            $('#demo').delay( 3000 ).hide(0);
         });
      });
   </script>
   </head> 
   <html>
   <body>
    <button id="addtocart">Add to Cart</button>
    <p id="demo"></p>
   </body>
 </html>

Upvotes: 2

sideroxylon
sideroxylon

Reputation: 4416

Set a time out function and then remove the html from the element:

function addedSuccess() {
  document.getElementById("demo").innerHTML = "Item added successfully in Cart";
  setTimeout(function() {
    $('#demo').html('');
  }, 3000);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button onclick="addedSuccess()">Add to Cart</button>

<p id="demo"></p>

Removing the HTML, rather than hiding the element makes it easier to re-use it on the next click (if that's what you plan to do) - just re-set the content, rather than re-set content and visibility.

Upvotes: 4

Related Questions