Question

I have a tiny php file which has only a div and a countdown javascript on it. Here is the code:

        <b><div id="COUNTER"></div></b>
        <SCRIPT type="text/javascript">
        var TargetCOUNTER = document.getElementById('COUNTER');
        //HIER DIE SEKUNDEN EINTRAGEN HERR REUTER !!
        var SecondsCOUNTER = 5654;
        //------------------------------------------
        var TargetTimeCOUNTER = new Date();
        var TimeBeginnCOUNTER = TargetTimeCOUNTER.getTime();
        var TimeEndCOUNTER = TimeBeginnCOUNTER + (SecondsCOUNTER*1000);
        TargetTimeCOUNTER.setTime(TimeEndCOUNTER);

        var DayCOUNTER = TargetTimeCOUNTER.getDate();
        var MonthCOUNTER = TargetTimeCOUNTER.getMonth() + 1;
        var YearCOUNTER = TargetTimeCOUNTER.getYear();
        if(YearCOUNTER < 999) YearCOUNTER += 1900;
        var hCOUNTER = TargetTimeCOUNTER.getHours();
        var mCOUNTER = TargetTimeCOUNTER.getMinutes();
        var sCOUNTER = TargetTimeCOUNTER.getSeconds();

        var fdayCOUNTER  = ((DayCOUNTER < 10) ? "0" : "");
        var fmonthCOUNTER  = ((MonthCOUNTER < 10) ? ".0" : ".");
        var fhCOUNTER  = ((hCOUNTER < 10) ? "0" : "");
        var fmCOUNTER  = ((mCOUNTER < 10) ? ":0" : ":");
        var fsCOUNTER  = ((sCOUNTER < 10) ? ":0" : ":");

        var EndDateCOUNTER = fdayCOUNTER + DayCOUNTER + fmonthCOUNTER + MonthCOUNTER  + "." + YearCOUNTER;
        var EndTimeCOUNTER = fhCOUNTER+hCOUNTER+fmCOUNTER+mCOUNTER+fsCOUNTER+sCOUNTER;

        CountDownCOUNTER();
        function CountDownCOUNTER() {
            var CurrentDateCOUNTER = new Date();
            var CurrentTimeCOUNTER = CurrentDateCOUNTER.getTime()
            var OpenTimeCOUNTER = Math.floor((TargetTimeCOUNTER-     CurrentTimeCOUNTER)/1000);

            var sCOUNTER = OpenTimeCOUNTER % 60;
            var mCOUNTER = ((OpenTimeCOUNTER-sCOUNTER)/60) % 60;
            var hCOUNTER = ((OpenTimeCOUNTER-sCOUNTER-mCOUNTER*60)/(60*60));
            var fhCOUNTER  = ((hCOUNTER < 10) ? "0" : "");
            var fmCOUNTER  = ((mCOUNTER < 10) ? ":0" : ":");
            var fsCOUNTER  = ((sCOUNTER < 10) ? ":0" : ":");

            var TimeCOUNTER = fhCOUNTER+hCOUNTER+fmCOUNTER+mCOUNTER+fsCOUNTER+sCOUNTER;
            var OutputStringCOUNTER=TimeCOUNTER;

            if(OpenTimeCOUNTER<=0) { // Event wenn der Countdown abgelaufen ist
                OutputStringCOUNTER="<a href='../hackerz/fight.php' style='text-decoration: none; color: #00ff00'>Aktualisieren</a>";
            }

            TargetCOUNTER.innerHTML=OutputStringCOUNTER; // Ausgabe des Strings in der Betreffenden Zelle
            document.title=(OutputStringCOUNTER.substring(0,2)=="<a")?"!!!READY!!!":OutputStringCOUNTER;
            window.setTimeout("CountDownCOUNTER()",1000);
        }
    </SCRIPT>

It works very well. You can check it out here: http://dev.willstequatschen.de/hw/sites/hackerz/counter.php

But I want to display 2 rows with different counters, when I copy and paste the code tiwce, the second counter is not displayed. Why is that?

Answer 1

Wrap all your code in a single function accepting an id of the counter container:

function setCounter(id) {
    var TargetCOUNTER = document.getElementById(id);
    // rest of your code here
}

Call this function for each counter separately:

setCounter('COUNTER1');
setCounter('COUNTER2');

See demo http://jsfiddle.net/dfsq/CdeGs/