homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Javascript with Mozilla Firefox & Opera
Problems with running script

 2:10 pm on Dec 17, 2007 (gmt 0)

Can someone please explain to me where I going wrong.

I have a javascript date function that should load with the page.

In IE it works fine but in Mozilla Firefox and Opera I cannot get it to run but other .js scripts do!




 2:17 pm on Dec 17, 2007 (gmt 0)


Please post the offending code!


 5:20 pm on Dec 17, 2007 (gmt 0)

Thanks for quick response herewith the .js that works with IE but not Mozilla or Opera. It is not my coding. I found it somewhere on free scripts.

// Java Document
function RealClock()
var dt=new Date();
var my_date= dt.getDate();
// Let us identify the format to display the date //
// we have to add 'st' if it is 1, 'nd' to be added for 2 and 'rd' for 3 and 'th' for other //
// let us find out the last digit of the date number //
var last_digit= my_date % 10; // divide by 10 and use the quotient //
var format;


my_date=my_date + format;
//////// End of identifying date format ///////

//--------------- LOCALIZEABLE GLOBALS ---------------
var d=new Date();
var monthname=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
var dayname=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
//ensure correct for language "1 January, 2007"

var myDate=new Date();
var myMinutes=myDate.getMinutes();
var mySeconds=myDate.getSeconds();

//-- if seconds less than zero then pad with a "0"
if (myMinutes<10)
myMinutes="0" + myMinutes;

//-- if minutes less than zero then pad with a "0"
if (mySeconds<10)
mySeconds="0" + mySeconds;

var TODAY = dayname[d.getDay()] + ", " + d.getDate() + format + " " + monthname[d.getMonth()] + " " + d.getFullYear() + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + d.getHours() + ":" + myMinutes + ":" + mySeconds;
//--------------- END LOCALIZEABLE ---------------

//-- write date and time --//
//-- variable id=basicDateTime (see the location for the clock in the HTML document) --//

//-- set clock to update every second --//
setTimeout("RealClock()", 1000);
return (TODAY);
//-- start clock --

In the HTML document there is a reference to basicDateTime as:
<!-- IMPORTANT that the date and time id=basicDateTime -->
<span id="basicDateTime">Date Goes Here</span>
<!-- run the date and clock function -->
<script src="TimeDate.js" type="text/livescript" language="javascript"></script>

where I have placed the clock.

South Africa


 6:00 pm on Dec 17, 2007 (gmt 0)


Only had a quick glance over your code... you are refering to the element in the 'global scope' - works in IE, but not other browsers. Instead you should call the W3C DOM function getElementById() like so:



 6:23 pm on Dec 17, 2007 (gmt 0)

The code is quite primitive, it'll display "11st" and "12nd".

But can't really see a problem why it wouldn't work. Try this modification and I'll do you a better one later....


var clockspan = document.getElementById( "basicDateTime");
clockspan.innerHTML = TODAY;

It would be helpful if you could look in the FF JavaScript Console and let me know the specific error it's throwing.

Damn! Penders beat me to it while I was rewiring my outside xmas lights!

[edited by: Dabrowski at 6:24 pm (utc) on Dec. 17, 2007]


 12:38 am on Dec 18, 2007 (gmt 0)

ok, here's a tidier version:

// Define these outside the function...
// They never change so no need to keep redefining them every second
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

// Split the date format into a separate function...
// It keeps the code tidy, more organised and more portable
function dateFormat( day) {
var suffix = "th"; // Default to "th"
var mod = day %10;

// This bit you know already
if( mod == 1)suffix = "st";
if( mod == 2)suffix = "nd";
if( mod == 3)suffix = "rd";

// Add this for 11, 12 and 13!
if( Math.floor( day /10) == 1)
suffix = "th";

return suffix;

// New clock function - much more readable
function runClock() {
var now = new Date();
var mins = now.getMinutes();
var secs = now.getSeconds();
var clock = "";

// If we build the string up bit by bit...
// Tt's much easier to see what's going on
clock += days[ now.getDay()] +", ";
clock += now.getDate() + dateFormat( now.getDate()) +" ";
clock += months[ now.getMonth()] +" ";
clock += now.getYear() +"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
clock += now.getHours() +":";

// This is an inline 'if' statement...
// As we don't need the result later, add the leading '0' here if needed
clock += ( mins <10? "0": "") + mins +":";
clock += ( secs <10? "0": "") + secs;

// Set the HTML on the page
document.getElementById( "basicDateTime").innerHTML = clock;

// Come back in 1 second!
setTimeout( runClock, 1000);



 5:15 am on Dec 18, 2007 (gmt 0)

Thanks for all the advise. A great help.

Isn't the expression:

// Set the HTML on the page
document.getElementById( "basicDateTime").innerHTML = clock;

used to GET information from the page rather than WRITE to it? Surely, having calculated the date and time inside clock() I need to pass the variable back from the clock js function so that the id=basicDateTime is written in HMTL document?



 6:40 am on Dec 18, 2007 (gmt 0)

document.getElementById( "basicDateTime").innerHTML = clock;

in dom-speak (i.e. document object model [w3.org]) this means assign the value of the clock variable to the html string within the element identified as "basicDateTime" in the current document.

definition, behavior and use of innerHTML [developer.mozilla.org] is unspecified, inconsistent and non-w3c-compliant.


 7:28 am on Dec 18, 2007 (gmt 0)

Thanks for the input.

OK if innerHTML is unspecific and non-W3C compliant, which I would like to be as I appreciate standards, what expression should I use?



 8:34 am on Dec 18, 2007 (gmt 0)

it's not pretty, but this is a good description of w3c compliant ways to alter element text using dom [developer.mozilla.org].

by the way, welcome to WebmasterWorld [webmasterworld.com], graham!


 2:55 pm on Dec 18, 2007 (gmt 0)


document.getElementById( "basicDateTime").innerHTML = clock;

Is the same as:
var mySpan = document.getElementById( "basicDateTime");
mySpan.innerHTML = clock;

First, we 'get' the element from the DOM, then we set it's innerHTML property to the clock text. If we don't need mySpan for anything else it's just easier to miss that step out.

definition, behavior and use of innerHTML is unspecified, inconsistent and non-w3c-compliant

While phranque is correct, the alternative is very longwinded and as he quite rightly said, not pretty at all.

I personally have always used innerHTML with no ill effects.

I suppose using that example the 'correct' way could be shortened to:
var mySpan = document.getElementById( "basicDateTime");
var myText = document.createTextNode( clock);
mySpan.replaceChild( myText, mySpan.childNodes[0]);

That will work because we only have 1 section of plain text inside our span. As you can see if you want more than plain text it gets really ugly!


 6:05 pm on Dec 19, 2007 (gmt 0)

Bumping for response, how are you getting on Graham?

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved