How do i make a <div> tag dissapear after 20 seconds with JS?

Question

i am building a project for my company and I am wondering how do i make a div dissapear after 20 seconds? Because I am building a site with a div with position: -webkit-sticky; and

<style>
.sticky {
position: -webkit-sticky;
position: sticky;
}
.areaWarning {
width: 100%;
height: 102px;
background: lightgreen;
display: inline-block;
}
</style>
<div class="sticky">
<div class="areaWarning">
<h1> This site is currently still being built </h1>
<p> We are still working on this site, sorry</p>
</div>
</div>

I would just like to know how can I set a timeout for that warning with JavaScript?

Thanks, Ring Games

Answer 1

you can use a setTimeout to hide the element after 20 seconds.

 const areaWarning = document.getElementById("areaWarning") setTimeout(hideElement, 20000) function hideElement() { areaWarning.style.display = "none" }

 .sticky { position: -webkit-sticky; position: sticky; }.areaWarning { width: 100%; height: 102px; background: lightgreen; display: inline-block; }

 <div class="sticky"> <div id="areaWarning"> <h1> This site is currently still being built </h1> <p> We are still working on this site, sorry</p> </div> </div>

Answer 2

In vanilla JS without ES6, something like:

<script>   
    window.addEventListener('load', function() {
        var warning = document.querySelector(".sticky");
        setTimeout(function() {
            warning.style.visibility = "hidden";
      }, 20000);
    })
</script>