Javascript with Mozilla Firefox & Opera

Problems with running script

[Graham2107]

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!

Graham

[Dabrowski]

Graham,

Please post the offending code!

[Graham2107]

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;

if(last_digit==1)
format="st";
else
if(last_digit==2)
format="nd";
else
if(last_digit==3)
format="rd";
else
format="th";

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) --//
basicDateTime.innerHTML=TODAY;

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

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.

Graham
Durban
South Africa

[penders]

basicDateTime.innerHTML=TODAY;

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:

document.getElementById('basicDateTime').innerHTML=TODAY;

[Dabrowski]

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....

Change:

basicDateTime.innerHTML=TODAY;

To:

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]

[Dabrowski]

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() +"      "; 
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); 
} 

runClock();

[Graham2107]

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?

Confused...

[phranque]

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.

[Graham2107]

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?

Graham
Durban

[phranque]

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!

[Dabrowski]

Graham,

This:

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!

[Dabrowski]

Bumping for response, how are you getting on Graham?