Welcome to WebmasterWorld Guest from 54.162.227.136

Forum Moderators: open

Message Too Old, No Replies

Javascript with Mozilla Firefox & Opera

Problems with running script

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

5+ Year Member



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

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

WebmasterWorld Senior Member 5+ Year Member



Graham,

Please post the offending code!

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

5+ Year Member



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

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

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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;
6:23 pm on Dec 17, 2007 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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]

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

WebmasterWorld Senior Member 5+ Year Member



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);
}

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

5+ Year Member



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

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

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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)

5+ Year Member



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

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

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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)

WebmasterWorld Senior Member 5+ Year Member



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!

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

WebmasterWorld Senior Member 5+ Year Member



Bumping for response, how are you getting on Graham?
 

Featured Threads

Hot Threads This Week

Hot Threads This Month