Show hide div with a time limit JS not Jquery

Question

I have the following div hidden in the head of my site.

<div id="esperaMensaje" class="mensajeEspera" style="display:none;">
<p>Espere un momento...</p>
</div>

That when the user clicks on the button with the class "continue" The div appears, and then hides after 8 seconds.

I tried using jquery which would be the easiest but it didn't work as I am setting it up in prestashop and it is a bit cumbersome as it is using an old version of jquery so I would like to make it work with pure js.

Answer 1

Add an event listener on the button for "click", set the <div> to it's default display property, then after 8 seconds set it back to display: none via setTimeout.

document.querySelector(".continue").addEventListener("click", () => {
  const div = document.querySelector("#esperaMensaje");
  div.style.display = "";
  setTimeout(() => div.style.display = "none", 8000); // 8000ms = 8s
});

<button class="continue">continue button</button>
<div id="esperaMensaje" class="mensajeEspera" style="display:none;">
  <p>Espere un momento...</p>
</div>