Javascript and PHP time ticker

Question

The following JavaScript does not work in Firefox, the only debug error I can get is "[06:29:53.518] SyntaxError: 09 is not a legal ECMA-262 octal constant" which relates to the var month = '.date('m', $time).'; line.

This code works perfectly in Internet explorer and Chrome, only in Firefox does it not work albeit using alert boxes to highlight a line it would typically stop at gives no hints as to the issue.

        var hours = '.date('G', $time).';
        var minutes = '.date('i', $time).';
        var seconds = '.date('s', $time).';
        var day = '.date('d', $time).';
        var month = '.date('m', $time).';
        var year = '.date('o', $time).';

        function getDayCount(monthIndex, yearIndex)
        {
            switch ( monthIndex )
            {
            case 0: return 31;
            case 1: return isLeapYear(yearIndex) ? 29 : 28;
            case 2: return 31;
            case 3: return 30;
            case 4: return 31;
            case 5: return 30;
            case 6: return 31;
            case 7: return 31;
            case 8: return 30;
            case 9: return 31;
            case 10: return 30;
            case 11: return 31;
            }
            return 31;
        }

        function isLeapYear(yearIndex)
        {
            return new Date(yearIndex, 2-1, 29).getDate() == 29;
        }

        function getDayName(year, month, day, hours, minutes, seconds)
        {
            var d = new Date(year, month, day, hours, minutes, seconds, 0);
            var weekday= new Array(7);
            weekday[0] = "Sunday";
            weekday[1] = "Monday";
            weekday[2] = "Tuesday";
            weekday[3] = "Wednesday";
            weekday[4] = "Thursday";
            weekday[5] = "Friday";
            weekday[6] = "Saturday";
            return weekday[d.getDay()];
        }

        function updateClock()
        {
            window.seconds++;

            if ( window.seconds == 60 ) {
                window.minutes++;
                window.seconds = 0;
            }

            if ( window.minutes == 60 ) {
                window.hours++;
                window.minutes = 0;
            }

            if ( window.hours == 24 ) {
                window.day++;
                window.hours = 0;
            }

            if ( (window.day - 1) == getDayCount(window.month - 1, window.year) ) {
                window.month++;
                window.day = 1;
            }

            if ( window.month == 12 ) {
                window.year++;
                window.month = 1;
            }

            var hourString = window.hours.toString();
            var minuteString = window.minutes.toString();
            var secondsString = window.seconds.toString();
            var dayString = window.day.toString();
            var monthString = window.month.toString();
            var yearString = window.year.toString();

            if ( minuteString.length < 2 )
                minuteString = "0".concat(minuteString);
            if ( hourString.length < 2 )
                hourString = "0".concat(hourString);
            if ( secondsString.length < 2 )
                secondsString = "0".concat(secondsString);
            if ( dayString.length < 2 )
                dayString = "0".concat(dayString);
            if ( monthString.length < 2 )
                monthString = "0".concat(monthString);

            document.getElementById("hour").innerText = hourString;
            document.getElementById("minute").innerText = minuteString;
            document.getElementById("second").innerText = secondsString;
            document.getElementById("day").innerText = dayString;
            document.getElementById("month").innerText = monthString;
            document.getElementById("year").innerText = yearString;
            document.getElementById("dayName").innerText = getDayName(year, month - 1, day, hours, minutes, seconds);
        }

        function init()
        {
            window.setInterval(function(){updateClock()}, 1000);
        }

The HTML concerned:

<h2>Live Chat - <span id="hour"></span>:<span id="minute"></span>:<span id="second"></span> <span id="dayName"></span> <span id="day"></span>/<span id="month"></span>/<span id="year"></span></h2>

Body init:

<body onload="javascript:init();">

`window.setInterval(function(){updateClock()}, 1000);` can be simplified to `window.setInterval(updateClock, 1000);` as it requires a function reference and you are not executing more than one function. — Sumurai8, Sep 15 '13 at 09:08

Sumurai8 · Answer 1 · 2013-09-15T05:53:04.093

0

date('m', $time) in php returns the string "09". When you insert it into your javascript without quotes, you get something like var month = 09. Javascript treats numbers with a prefix 0 as an octal number, and as the octal numbers only future the digits 0 to 7, there is no octal number 9. You can use intval() in php (docs) to convert the string to an integer: intval( date('m', $time), 10 ); before inserting it into your javascript.

Edit: A more sensible way might be to use the option for month that doesn't include a prefix 0 (date( 'n', $time );) or add quotes around it to make it a string. The same is true for the day of the month (j instead of d), hours, minutes and seconds. See the docs.

edited Sep 15 '13 at 05:53

answered Sep 15 '13 at 05:45

Sumurai8

20,333
11
66
100

yes you are quite right however using intval( for each date function does not sole the issue. The HTML does not update with the time as it does in IE. – johnsonwi Sep 15 '13 at 05:51
Or, use `date('n', $time)` to output the month without a leading zero. This should also be done for the day, hour, minute and second values, to prevent those from being mistakenly read as octal numbers if the value happens to be less than 10. – scotsninja Sep 15 '13 at 05:53
Added the hours, minutes and seconds to the answer now too @ scotsninja – Sumurai8 Sep 15 '13 at 05:56
Also corrected the answer for the 5th time now -_-' Must be still asleep. – Sumurai8 Sep 15 '13 at 05:57
hi, note that I stated I added intval to each date function, the ticker still does not work in firefox. – johnsonwi Sep 15 '13 at 08:33
@johnsonwi Define "does not work". If you get the same error it might still be cached. I recommend the solution in the "Edit:" part if it is just a problem with the `date( ... )` part of the code though. – Sumurai8 Sep 15 '13 at 08:40
It does not tick like it does within IE. The variables within Firefox are init to: var hours = 9; var minutes = 48; var seconds = 31; var day = 15; var month = 9; var year = 2013; – johnsonwi Sep 15 '13 at 08:54
The solution is to use textContent instead of innerText as firefox does not support innerText http://blog.coderlab.us/2005/09/22/using-the-innertext-property-with-firefox/ – johnsonwi Sep 15 '13 at 09:11

score 0 · Accepted Answer · answered Sep 15 '13 at 09:13

The solution is to use textContent instead of innerText as firefox does not support innerText

http://blog.coderlab.us/2005/09/22/using-the-innertext-property-with-firefox/

if(document.all) {
    document.getElementById("hour").innerText = hourString;
    document.getElementById("minute").innerText = minuteString;
    document.getElementById("second").innerText = secondsString;
    document.getElementById("day").innerText = dayString;
    document.getElementById("month").innerText = monthString;
    document.getElementById("year").innerText = yearString;
    document.getElementById("dayName").innerText = getDayName(year, month - 1, day, hours, minutes, seconds);
}
else {
    document.getElementById("hour").textContent = hourString;
    document.getElementById("minute").textContent = minuteString;
    document.getElementById("second").textContent = secondsString;
    document.getElementById("day").textContent = dayString;
    document.getElementById("month").textContent = monthString;
    document.getElementById("year").textContent = yearString;
    document.getElementById("dayName").textContent = getDayName(year, month - 1, day, hours, minutes, seconds);
}

Javascript and PHP time ticker

2 Answers2