Redirect to Another page after specific time with countdown showing

Question

I'm trying to redirect this button after specific time. But the countdown couldn't start before redirecting. I wish it to be redirect after 5 or 10 seconds. But remember window.location should be in HTML Element.

function myFunction(){
var button=document.getElementById('button');
   button.addEventListener('click', function(){
   var i=0;
   var tt=setInterval(function (){     
   i=i+1;
   var counter=5-i;
   button.innerHTML='You Will Be Redirect After:'+counter;
     if(counter===0){
       clearInterval(tt);
     }
     
   },1000);
   
});};

<button id="button">
<a href="#" class="butstyle" id="button1" onclick="myFunction(window.location='https://google.com')" >Click To Redirect</a>
</button>

The markup is invalid, [interactive content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Interactive_content) inside [button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) is not allowed. Though `a` without `href` attribute is not interactive ... the onclick in that anchor redirects immediately, move `window.location=...` to `myFunction` after the line clearing the interval. — Teemu, Aug 11 '20 at 06:43
"_But remember window.location should be in HTML Element_" Why? You [shouldn't use inline eventhandlers](https://stackoverflow.com/questions/62462554/how-does-the-way-in-which-a-javascript-event-handler-is-assigned-affect-its-exec/63119431#63119431) in the first place. — Teemu, Aug 11 '20 at 06:52
There are many ways to include the information needed for downloading into elements without using inline listeners, and also many ways to store the URL in JS only, and connect the stored data and the clicked button. — Teemu, Aug 11 '20 at 07:14

Always Helping · Accepted Answer · 2020-08-11T07:02:16.047

You can put the var i outside the function. So that counter is incremented as well.

Also do not use inline event Handlers (where possible) - Redirect only when the condition is met in your if condition.

Pass the redirect URL as an argument and access that in myFunction(url)

Demo:

var i = 0;

function myFunction(url) {
  var tt = setInterval(function() {
    i = i + 1;
    var counter = 6 - i;
    button.innerHTML = 'You Will Be Redirect After:' + counter;
    if (counter === 0) {
      clearInterval(tt);
      window.location = url //redirect here
    }
  }, 1000);
};

<button id="button">
<a href="#" class="butstyle" id="button1" onclick="myFunction('https://google.com')" >Click To Redirect</a>
</button>

score 0 · Answer 2 · answered Aug 11 '20 at 07:03

I would do something like this. 5 is the amount of seconds you want to redirect after.

document.getElementById('btn').addEventListener("click", () => {
  let i = 1;
  setInterval(() => {
    if(i == 5){
      window.location.href = "https://google.com"
    }
    document.getElementById('btn').innerHTML = `Redirecting in ${5 - i} seconds`
    i++;
  }, 1000);
});

<button id="btn">
  Click to redirect
</button>

score 0 · Answer 3 · answered Aug 11 '20 at 07:13

I would take the 2020 option using the "data" attributes, see the below example. the naming of the attributes should be descriptive enough. Let me know if there are any questions.

<button id="button" onclick="myFunction(this)" data-secondstoredirect="5" data-urltoredirect="https://google.com">Click To Redirect</button>

<script>
    function myFunction(e) {
        e = e || window.event;
        var $this = e.target || e.srcElement || e;
        if ($this.nodeType == 3) $this = $this.parentNode; // defeat Safari bug, https://stackoverflow.com/questions/1553661/how-to-get-the-onclick-calling-object
        
        var secondstoredirect = $this.getAttribute("data-secondstoredirect"),
            redirectAfterSeconds = (secondstoredirect * 1000),
            urlToRedirect = $this.getAttribute("data-urltoredirect");
        $this.innerHTML = 'You Will Be Redirect After: ' + redirectAfterSeconds;
        var tt = setInterval(function () {
            window.location.href = urlToRedirect;
        }, redirectAfterSeconds);
    }
</script>

Redirect to Another page after specific time with countdown showing

3 Answers3