Trying to have two JS countdowns on one page

Question

So i have this code in counter.js

month= --month;
dateFuture = new Date(year,month,day,hour,min,sec);
dateFuture2 = new Date(year2,month2,day2,hour2,min2,sec2);

function GetCount(){

    dateNow = new Date();                                                            
    amount = dateFuture.getTime() - dateNow.getTime()+5;               
    delete dateNow;

    /* time is already past */
    if(amount < 0){
            out=
            "<div id='days'><span></span><p>0</p><div id='days_text'></div></div>" + 
            "<div id='hours'><span></span><p>0</p><div id='hours_text'></div></div>" + 
            "<div id='mins'><span></span><p>0</p><div id='mins_text'></div></div>" + 
            "<div id='secs'><span></span><p>0</p><div id='secs_text'></div></div>" ;
            document.getElementById('countbox').innerHTML=out;       
    }
    /* date is still good */
    else{
            days=0;hours=0;mins=0;secs=0;out="";

            amount = Math.floor(amount/1000); /* kill the milliseconds */

            days=Math.floor(amount/86400); /* days */
            amount=amount%86400;

            hours=Math.floor(amount/3600); /* hours */
            amount=amount%3600;

            mins=Math.floor(amount/60); /* minutes */
            amount=amount%60;


            secs=Math.floor(amount); /* seconds */


            out=
            "<div id='days'><span></span><p>" + days +"</p><div id='days_text'></div></div>" + 
            "<div id='hours'><span></span><p>" + hours +"</p><div id='hours_text'></div></div>" + 
            "<div id='mins'><span></span><p>" + mins +"</p><div id='mins_text'></div></div>" + 
            "<div id='secs'><span></span><p>" + secs +"</p><div id='secs_text'></div></div>" ;
            document.getElementById('countbox').innerHTML=out;


            setTimeout("GetCount()", 1000);
    }
}

month= --month;
dateFuture = new Date(year,month,day,hour,min,sec);
dateFuture2 = new Date(year2,month2,day2,hour2,min2,sec2);

function GetCount2(){

    dateNow = new Date();                                                            
    amount = dateFuture2.getTime() - dateNow.getTime()+5;               
    delete dateNow;

    /* time is already past */
    if(amount < 0){
            out=
            "<div id='days2'><span></span><p>0</p><div id='days_text'></div></div>" + 
            "<div id='hours2'><span></span><p>0</p><div id='hours_text'></div></div>" + 
            "<div id='mins2'><span></span><p>0</p><div id='mins_text'></div></div>" + 
            "<div id='secs2'><span></span><p>0</p><div id='secs_text'></div></div>" ;
            document.getElementById('countbox2').innerHTML=out;       
    }
    /* date is still good */
    else{
            days=0;hours=0;mins=0;secs=0;out="";

            amount = Math.floor(amount/1000); /* kill the milliseconds */

                       hours=Math.floor(amount/499600); /* hours */
            amount=amount%3600;

            mins=Math.floor(amount/60); /* minutes */
            amount=amount%60;


            secs=Math.floor(amount); /* seconds */


            out=
            "<div id='days2'><span></span><p>" + days +"</p><div id='days_text'></div></div>" + 
            "<div id='hours2'><span></span><p>" + hours +"</p><div id='hours_text'></div></div>" + 
            "<div id='mins2'><span></span><p>" + mins +"</p><div id='mins_text'></div></div>" + 
            "<div id='secs2'><span></span><p>" + secs +"</p><div id='secs_text'></div></div>" ;
            document.getElementById('countbox2').innerHTML=out;


            setTimeout("GetCount2()", 1000);
    }
}

window.onload=function(){GetCount(); GetCount2();}

And i have this code in index.html to give the date to the secific time, in this instance both are the same

     <!-- Enter countdown here -->
<script type="text/javascript">
//Edit data below to your personal preferences ----------------------------------

//Give the date ---------------------------------
year = 2015; year2 = 2015;
month = 12; month2 = 12;
day = 12; day2 = 12;
//Give the point of time ------------------------
hour= 24; hour2 = 24;
min= 0; min2 = 0;
sec= 0; sec2 = 0;
//-----------------------------------------------

//That's it!

and this to trigger both count downs in index.html

<!-- Countdown -->
            <div id="countdown">
                <div class="event-title">
                </div>
                <div id="countbox"></div>
                <div class="event-title"></div>
            </div>


        <div id="countdown2">
            <div class="event-title">
            </div>
            <div id="countbox2"></div>
            <div class="event-title"></div>
        </div>

The countdowns are there and are counting down, but for some reason the second counter doesn't have any days it just shows as zero, and it just shows how many hours, does anyone see why i'm having this problem? I've gone through everything and i'm obviously missing out something important.

Thank you for any help.

Answer 1

The problem seems like you are manipulating same (global) variables in both of your functions, as they are not declared within any scope.

days=0;hours=0;mins=0;secs=0;out="";

try renaming these to

days2=0;hours2=0;mins2=0;secs2=0;out2="";

Answer 2

The short answer is that you're missing a few lines of code. Specifically after month= --month; you need month2= --month2; and in the GetCount2 function you missed these two lines:

days=Math.floor(amount/86400); /* days */
amount=amount%86400;

Long answer (and what I would recommend) is to make the GetCount function a bit more generic and only use one function. So counter.js could look something like this:

function GetCount(countdownDate, elementId){
    var dateNow = new Date();
    var amount = countdownDate.getTime() - dateNow.getTime() + 5;               
    delete dateNow;
    var out = "";
    /* time is already past */
    if(amount < 0){
            out =
            "<div id='days'><span></span><p>0</p><div id='days_text'></div></div>" + 
            "<div id='hours'><span></span><p>0</p><div id='hours_text'></div></div>" + 
            "<div id='mins'><span></span><p>0</p><div id='mins_text'></div></div>" + 
            "<div id='secs'><span></span><p>0</p><div id='secs_text'></div></div>" ;
            document.getElementById(elementId).innerHTML=out;       
    }
    /* date is still good */
    else{
            var days=0, hours=0, mins=0, secs=0;

            amount = Math.floor(amount/1000); /* kill the milliseconds */

            days=Math.floor(amount/86400); /* days */
            amount=amount%86400;

            hours=Math.floor(amount/3600); /* hours */
            amount=amount%3600;

            mins=Math.floor(amount/60); /* minutes */
            amount=amount%60;

            secs=Math.floor(amount); /* seconds */

            out=
            "<div id='days'><span></span><p>" + days +" days</p><div id='days_text'></div></div>" + 
            "<div id='hours'><span></span><p>" + hours +" hours</p><div id='hours_text'></div></div>" + 
            "<div id='mins'><span></span><p>" + mins +" mins</p><div id='mins_text'></div></div>" + 
            "<div id='secs'><span></span><p>" + secs +" secs</p><div id='secs_text'></div></div>" ;
            document.getElementById(elementId).innerHTML=out;

            setTimeout(function() { GetCount(countdownDate, elementId); }, 1000);
    }
}

And you could on the page you would need something like

<script type="text/javascript">
    //Edit data below to your personal preferences ----------------------------------

    //Give the date ---------------------------------
    var year = 2015, year2 = 2015,
    month = 12, month2 = 12;
    day = 12, day2 = 12,
    //Give the point of time ------------------------
    hour= 24, hour2 = 24,
    min= 0, min2 = 0,
    sec= 0, sec2 = 0;
    //-----------------------------------------------

    //That's it!

    month= --month;
    month2= --month2;
    dateFuture = new Date(year,month,day,hour,min,sec);
    dateFuture2 = new Date(year2,month2,day2,hour2,min2,sec2);

    window.onload=function(){
        GetCount(dateFuture, "countdown"); GetCount(dateFuture2, "countdown2");
    }
</script>