setTimeout while showing element not ruining as expected

Question

I want to show a div for few seconds, so I coded:

    var myVar;
 function display() {
myVar = setTimeout(alertFunc, 1000);
}
function alertFunc() {
 document.getElementById('random').innerText = rand; 
 }

but it not hiding after few seconds. how can I fix this?
and if I want this div to be in front of all the page (the other divs) for few seconds?

On your source code I see of no attempt to hide anything so why would it hide if you haven't attempted to hide it? You question is lacking more relevant source code and possibly more detail. If you could create a working snippet I think that would be helpful for myself and others to work with. — NewToJS, Dec 24 '18 at 23:14

Danziger · Answer 1 · 2018-12-24T23:28:22.203

What your display function is currently doing is waiting for 1000 ms and calling alertFunc, which is just changing the innerText of an element (this might be displaying it if it was empty before), but nothing is being hidden there.

Assuming you have only one element to show/hide, you should do something like this:

const popup = document.getElementById('popup');

let timeoutID = null;

function showPopup(text, duration) {
  // In case we called this before:
  clearTimeout(timeoutID);
  
  // Update the text and show:
  popup.innerText = text;  
  popup.classList.remove('hidden');
  
  if (duration) {
    // After `duration` ms, call hidePopup to hide it again:
    timeoutID = setTimeout(hidePopup, duration);
  }
}

function hidePopup() {
  popup.classList.add('hidden');
}

showPopup(' Hello there!', 1000);

document.onclick = () => {
  showPopup(' Hello there!', 1000);
};

body {
  font-family: monospace;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  user-select: none;
}

#popup {
  position: fixed;
  top: 50%;
  left: 50%;
  height: 160px;
  width: 300px;
  margin: -80px 0 0 -150px;
  background: white;
  box-shadow: 0 0 32px 0 rgba(0, 0, 0, .125);
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#popup.hidden {
  display: none;
}

 Click anywhere to display the popup again.

<div id="popup" class="hidden"></div>

its looks good, in my issue 'text' is var and changing not like 'hello world' which is const..still can use? — Kate Beck, Dec 24 '18 at 23:36
@IsraelNehes You can pass anything you want to `showPopup` as the value to display as `innerText` or get rid of that part of the code if the value doesn't change and is already in the popup. — Danziger, Dec 24 '18 at 23:45
its not working for `showPopup(rand,1000);` while the rand is is the value I want to show — Kate Beck, Dec 24 '18 at 23:55

score 0 · Answer 2 · answered Dec 24 '18 at 23:23

0

If you just want to see the div for 1 second (1000 milliseconds) using your display function, you could do something like this:

function display() {
    document.getElementById("theDiv").style.display = "none";
    setTimeout(() => document.getElementById("theDiv").style.display = "block", 1000);
}

answered Dec 24 '18 at 23:23

Jack Bashford

43,180
11
50
79

thanks! var for my is a var, not a text (actually it a word but not a const one) so how can I still use it?. – Kate Beck Dec 24 '18 at 23:44

score 0 · Answer 3 · answered Dec 24 '18 at 23:26

0

Just suggesting a minor correction, not the whole makeover of the code.

var myVar;

function display() {
  myVar = setTimeout(alertFunc, 1000);
}

function alertFunc() {
  //hiding now
  document.getElementById('random').style.display = 'none'; 
}

answered Dec 24 '18 at 23:26

Rut Shah

1,093
11
13

no ` = rand` is what I want to display – Kate Beck Dec 24 '18 at 23:50

setTimeout while showing element not ruining as expected

3 Answers3