Display thank you message and redirect to another page

Question

Currently, I managed to create alert pop-up "Thanks" after on-click event. It works for 1 second and redirect to https://www.w3schools.com .

How to create not pop-up alert, but a kind of temporary blank page with "Thanks" for 3-4 seconds in the middle?

After this I want to be redirected to https://www.w3schools.com .

 function two() { alert('Thanks'); window.location.href = 'https://www.w3schools.com'; }

 <input type="button" onclick="two();" value="Submit">

Answer 1

You could create a splash page that gets displayed above the current content and then use a timeout to redirect the user.

Edit: Moved the text to the CSS rule. If you do not want this, add the text inside the <div class="thanks"> tag and remove the :after CSS rule.

 function redirect() { document.querySelector('.thanks').classList.remove('thanks-hidden'); setTimeout(() => { window.location.href = 'https://www.w3schools.com/'; }, 3000); // Wait 3 seconds and then redirect. }

 .thanks { display: flex; position: absolute; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; background: #FFF; justify-content: center; align-items: center; font-size: 2em; } .thanks:after { content: "Thanks"; } .thanks-hidden { display: none; }

 <input type="button" onclick="redirect()" value="Submit"> <div class="thanks thanks-hidden"></div>

Answer 2

You can use setTimeout

function two() {
  alert('Thanks');
  setTimeout(function() {
    window.location.href = 'https://www.w3schools.com';
  }, 4000 /* ms to delay for*/);
}

Answer 3

You can use setTimeout to set a timer for a specific function. You can use innerHTML to clear the content of the body.

 function two() { alert('Thanks'); document.body.innerHTML = ''; setTimeout(() => { window.location.href = 'https://www.w3schools.com'; },4000); }

 <input type="button" onclick="two();" value="Submit">