CODEWITHSUNDEEP
javascripthtml
Tim B. McKinnon
Tim B. McKinnon

Reputation: 53

Redirect to Another page after specific time with countdown showing

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>

Upvotes: 1

Views: 2076

Answers (3)

Alin3661
Alin3661

Reputation: 11

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>

Upvotes: 0

Kai
Kai

Reputation: 353

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>

Upvotes: 1

Always Helping
Always Helping

Reputation: 14570

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>

Upvotes: 2

Related Questions