How to change css display from visible to not visible after a certain time using javascript

Question

I want to set a DOM objects css display property to 'block' for 2 seconds and then have it set back to 'none' after the 2 seconds. How can this be done in just javascript? I am really new to this so don't really get jquery just yet.

I tried

document.querySelector(".one-rolled-popup").style.display = "block";

and then set it to

document.querySelector(".one-rolled-popup").style.display = "none";

after some other operations but this just hides it completely

Danyal Imran · Accepted Answer · 2019-01-25T11:49:07.423

2

use setTimeout. It will execute a method after X milliseconds. Such in your case, you will display the block & then set it back to no-display after 2 seconds.

method () {
  // display it
  document.querySelector(".one-rolled-popup").style.display = "block";

  // hide it after 2 seconds
  setTimeout(() => {
      document.querySelector(".one-rolled-popup").style.display = "none",
  2000);
}

edited Jan 25 '19 at 11:49

answered Jan 25 '19 at 11:40

Danyal Imran

2,515
13
21

() => { // code } is a shorthand for function() { // code } which was introduced in JavaScript ES6 Specification. It is used for solving a classic problem hence the 'this' scope. But since it doesn't matter here, you can use any of the two. @PumpkinBreath – Danyal Imran Jan 25 '19 at 11:57
@PumpkinBreath check [this](https://stackoverflow.com/questions/37796654/what-is-the-difference-between-and-function-in-react-native-javasc) – Alexandre Elshobokshy Jan 25 '19 at 12:00
much appreciated – PumpkinBreath Jan 25 '19 at 12:04
@PumpkinBreath glad to help :) – Danyal Imran Jan 25 '19 at 12:05

Alexandre Elshobokshy · Answer 2 · 2019-01-25T11:49:02.240

You can do the following using setTimeout. I suppose that by default the div is visible so I don't have to show it.

setTimeout(
  function() {
    document.querySelector(".one-rolled-popup").style.display = "none";
  }, 2000);

<div class="one-rolled-popup">Testing</div>

But if it's hidden by default you could do this instead (click on the screen in the snippet to see the effect) :

function showAndHide() {
  document.querySelector(".one-rolled-popup").style.display = "block";
  setTimeout(
    function() {
      document.querySelector(".one-rolled-popup").style.display = "none";
    }, 2000);
}



window.onclick = function() {
  showAndHide();
}

.one-rolled-popup {
  display: none;
}

<div class="one-rolled-popup">Testing</div>

score 1 · Answer 3 · answered Jan 25 '19 at 11:42

Try this function

   setTimeout(function(){ 
   if (document.querySelector(".one-rolled-popup").style.display == "block";) {
      document.querySelector(".one-rolled-popup").style.display= "none";
   } else {
      document.querySelector(".one-rolled-popup").style.display= "none";
   }

  }, 3000);

How to change css display from visible to not visible after a certain time using javascript

3 Answers3