Question

I was trying to make a JS countdown script that adjusts both the seconds to go and the price that has to be paid.

For example:
You will be redirected in 5 seconds or click here to pay 150 to redirect immediately.

So, 30 virtual coins a second.

I have already tried to make it but I suck at JS.

So, what I tried (by copy/pasting other codes found on the internet):

<script type="text/javascript">
function countDown(secs,elem) {
    var element = document.getElementById(elem);
    element.innerHTML = "Please wait for "+secs+" seconds";
    if(secs < 1) {
        clearTimeout(timer);
        location.href='mywebpage.php';
    }
    secs--;
    var timer = setTimeout('countDown('+secs+',"'+elem+'")',1000);

        timeout = 4;
        if(document.getElementById('costs'))
            document.getElementById('costs').innerHTML='&euro; '+(timeout*30);
        document.getElementById('status').innerHTML = formatTime (timeout);
        timeout--;
}
</script>

Then offcourse having the HTML:

<div id="costs"></div>
<div id="status"></div>

<script type="text/javascript">countDown(3000,"status");</script>

I hope someone can help me.

Auto count down, has to redirect when the counter hits zero, has to take off 30 something every second from the second “counter”.

All tips will be appreciated.

Thanks in advance.

Edit:
Note that the countdown works, timeout also works but I don’t know how to link the countdown to the timeout = 4 (the number of the countdown function should be at 4, already tried document.getElementById(‘status’); and stuff like that).

Edit 2:

Fixed!

So, figured it out.

For the people that are also searching for a similar JS:

<script type="text/javascript">
function countDown(secs, ele)
{

    if(secs <= -1)
    {
        location.href = 'rangtest.php'; // No need to kill a timeout it only fires once
    }
    else
    {
        // This is just copying your code, you should fix this to use the targeted ele
        if(document.getElementById('costs'))
            document.getElementById('costs').innerHTML='&euro; '+(secs*30);
        document.getElementById('status').innerHTML = (secs);

        secs--;
        setTimeout( function() { countDown(secs, ele); }, 1000);
    }
}

</script>

Thanks to @Dan Mayor.

Answer 1

I’ve always had problems trying to apply arguments to the timer functions which have led me to always define an anonymous function that in turn calls what I am trying to call. Below will need some modification but should help.

function countDown(secs, ele)
{
    if(secs <= 0)
    {
        location.href = 'mypage.htm'; // No need to kill a timeout it only fires once
    }
    else
    {
        // This is just copying your code, you should fix this to use the targeted ele
        if(document.getElementById('costs'))
            document.getElementById('costs').innerHTML='&euro; '+(secs*30);
        document.getElementById('status').innerHTML = formatTime (secs);

        secs--;
        setTimeout( function() { countDown(secs, ele); }, 1000);
    }
}