Avatar of Whing Dela Cruz
Whing Dela Cruz
Flag for Anguilla asked on

Timer on div

Hi experts, would it be possible to put timer on div? I have a div with an id, txtHint. then, I have this command document.getElementById("txtHint").innerHTML="Hello" Here, the message "hello", I want it to disappear after  3 seconds. Thanks!  

<div id="txtHint"></div>
* divHTMLJavaScript

Avatar of undefined
Last Comment
Leonidas Dosas

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Prakash Samariya

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Whing Dela Cruz

ASKER
Thank you Prakash, now its working!
Prakash Samariya

Try with below code change
<script>
function Go(e)
{
   var msg = "Hello!"
   document.getElementById("txtHint").innerHTML=msg;
   setTimeout(function(){ document.getElementById("txtHint").innerHTML="" }, 3000);
}
</script>

Open in new window

Prakash Samariya

welcome :)
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
Leonidas Dosas

HTML

<button onclick="Go()">Show</button>

<div id="txtHint">MyHint</div>

Open in new window


JS
//Initialy i set var with the div element
var divElm=document.getElementById('txtHint');
//I hide the divElm
divElm.style.display='none';
//I create a function that when it invokes the div logo appear
function Go()
{
  var msg = "Hello!";
  divElm.innerHTML=msg;
  divElm.style.display='inline';
  //I use the setTimeout to hide the divElm after 3 sec=3000ms
  setTimeout(function(){
  divElm.style.display='none';  
  }, 3000);
}

Open in new window