470,618 Members | 1,710 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,618 developers. It's quick & easy.

Javascript Differences in Browsers

Mozilla and IE works different with Javascript.
I have Javascript Code which works fine with Mozilla
and it breaks with Internet Explorer.

I like to convert my code to work with both the browser.

What are the standard tools for the same?

Is there something which is mozilla specific that I should avoid to
have it working with internet explorer?

Thanks.!
Jul 23 '05 #1
9 1567
go**********@yahoo.com (Artist) wrote:
Mozilla and IE works different with Javascript.
I have Javascript Code which works fine with Mozilla
and it breaks with Internet Explorer.
The actual IE implementations are not very different. What does differ
enough to cause lots of trouble is the DOM (Document Object Model).
I like to convert my code to work with both the browser. What are the standard tools for the same?
I don't know of anything that automates this task.
Is there something which is mozilla specific that I should avoid to
have it working with internet explorer?


More like the other way around. IE has some extensions that make it
somewhat easier to code sometimes, but they are non-standard. Mozilla
sticks to the standards. Generally, if you have code that works in
Mozilla it will also work in IE. For example, if you have the
following HTML:

<input type="text" name="xxx" id="xxx">

You can assign it a value in IE by coding

xxx.value="somethingorother";

But that won't work in Mozilla. The standard way to do that, which
will work in either browser, is:

getElementById("xxx").value="somethingorother";

--
Tim Slattery
Sl********@bls.gov
Jul 23 '05 #2
Tim Slattery wrote:
<input type="text" name="xxx" id="xxx">
You can assign it a value in IE by coding
xxx.value="somethingorother";
Don't you mean document.forms[0]["xxx"].value = "something"?
That should clearly work in both.
But that won't work in Mozilla. The standard way to do that, which
will work in either browser, is:
getElementById("xxx").value="somethingorother";


What about form fields that share the same name?
Since ids must be unique, this approach won't work.

--
Matt Kruse
Javascript Toolbox: http://www.mattkruse.com/javascript/
Jul 23 '05 #3
Matt Kruse wrote:
Tim Slattery wrote:
<input type="text" name="xxx" id="xxx">
You can assign it a value in IE by coding
xxx.value="somethingorother";

Don't you mean document.forms[0]["xxx"].value = "something"?


Only if its the first form on the page.

document.forms['formName']['elementNAME'].value = "something";

I am not going to profess to be able to read Tim's mind, but I think I
can reasonably assume he meant exactly what he typed, since he
explicitly says "in IE" and then goes on to say "But that won't work in
Mozilla". Because xxx.value is an IE shortcut.

That should clearly work in both.
But that won't work in Mozilla. The standard way to do that, which
will work in either browser, is:
getElementById("xxx").value="somethingorother" ;

What about form fields that share the same name?
Since ids must be unique, this approach won't work.


Nor does the forms notation work when inputs share the same name
attribute, not even in IE.

<form name="myForm">
<input name="myInput">
<input name="myInput">
<input name="myInput">
<input type="button"
onclick="document.forms['myForm'].elements['myInput'].value='something'";
value="Guess which ones get changed">
</form>
--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/
Jul 23 '05 #4
DU
Artist wrote:
Mozilla and IE works different with Javascript.
That's not really true. But they work differently regarding DOM 0, DHTML
object model and DOM 2 Events but javascript language is extremely well
supported by Mozilla 1.x and MSIE 6 for windows.
I have Javascript Code which works fine with Mozilla
and it breaks with Internet Explorer.

I like to convert my code to work with both the browser.

Well, without any specifics, anything concrete, no url, no chunk of
code, no browser version mentioned, I don't know exactly what you were
looking for or what you were expecting from this newsgroup.
What are the standard tools for the same?

Knowledge and experience. Sometimes, books and reference sites.
Is there something which is mozilla specific that I should avoid to
have it working with internet explorer?

Thanks.!


Yes. Since DOM 1 attributes and methods are fairly widely supported by
Mozilla 1.x and MSIE 6 for windows, then there is no need to resort to
proprietary IE DOM.

DU
Jul 23 '05 #5
DU
Randy Webb wrote:
Matt Kruse wrote:
Tim Slattery wrote:
<input type="text" name="xxx" id="xxx">
You can assign it a value in IE by coding
xxx.value="somethingorother";


Don't you mean document.forms[0]["xxx"].value = "something"?

Only if its the first form on the page.

document.forms['formName']['elementNAME'].value = "something";

I am not going to profess to be able to read Tim's mind, but I think I
can reasonably assume he meant exactly what he typed, since he
explicitly says "in IE" and then goes on to say "But that won't work in
Mozilla". Because xxx.value is an IE shortcut.

That should clearly work in both.
But that won't work in Mozilla. The standard way to do that, which
will work in either browser, is:
getElementById("xxx").value="somethingorother";


What about form fields that share the same name?
Since ids must be unique, this approach won't work.

Nor does the forms notation work when inputs share the same name
attribute, not even in IE.

<form name="myForm">
<input name="myInput">
<input name="myInput">
<input name="myInput">
<input type="button"
onclick="document.forms['myForm'].elements['myInput'].value='something'";
value="Guess which ones get changed">
</form>


A big chunk of the confusion comes from the naming scheme used. It's not
recommendable to use the same identifier for the name attribute and the
id attribute; for countless reasons, it is best to avoid doing this.

According to W3C specs, the correct W3C DOM way to access a form element
in an HTML 4.01 valid, conformant document is:

document.forms["FormName"].elements["InputName"]
or
document.getElementById("InputId")

In XHTML, the same would be
document.forms[intIndex].elements["InputName"]
or
document.getElementById("InputId")

DU
Jul 23 '05 #6
DU <dr*******@hotWIPETHISmail.com> writes:
A big chunk of the confusion comes from the naming scheme used. It's
not recommendable to use the same identifier for the name attribute
and the id attribute; for countless reasons, it is best to avoid doing
this.
While correct in this context, it is sadly not a general rule.

For form controls (input, textarea, etc.), param elements and
.... one more that I forgot, you should not use the same value for
the id and name attributes.
In *all* other tags, if both the id and name attribute are present,
they must be the same.
In XHTML, the same would be
document.forms[intIndex].elements["InputName"]


or
document.forms['formId'].elements['ControlName']

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 23 '05 #7
go**********@yahoo.com (Artist) wrote in message news:<de**************************@posting.google. com>...
Mozilla and IE works different with Javascript.
I have Javascript Code which works fine with Mozilla
and it breaks with Internet Explorer.

I like to convert my code to work with both the browser.

What are the standard tools for the same?

Is there something which is mozilla specific that I should avoid to
have it working with internet explorer?

Thanks.!


First of all, there should be no need to convert your code. If you are
doing alot of complex DOM stuff, you may need to do some simple
browser detection and flip object and proerty refs.

For the most part, IE does support most open (mozilla) standards. Here
are a couple of areas that it does differ.

Objects:
Although IE adds any HTML Element with an ID property to the
namespace to the 'all' property of 'document' object (which is a
default global reference after window I believe), the use of this
should be avoided at all costs. Instead always use
document.getElementById. Its the standard and will still work in IE.
The reverse is not true.

Event listeners:
In IE you cannot use ~Object~.addEventListener. You must directly
assign with either an inline assignment or ~object~.~eventname~ =
function handler(){... or equivalent. When you use the
~object.~eventname~ methodology, Mozilla by default assigns the event
object as an argument. IE does not. You will need to access the method
through window.event (or just event since window is the default global
namespace)

Arrays:
Mozilla is a little more flexible. With the array:
`["one","two","three",]`, Moz will ignore the last element and will
return an array of len 3. IE will return an array of Len 4 with the
last element as undefined. This can cause issues where you have server
code that iteratively generates JS arrays for you.

Form Elements:
Although its a good idea to use
window.forms["formname"]["elementname"] since it works in both
browsers, IE has a bug where if the first character is a number it
does not recognize the element. Generally I avoid using numbers as the
first character in elements because of this bug.

Regarding Tools, I just use a text editor and set up IE to dump any
errors to the screen (tools>internet options>advanced>display a
notification about every script error). I avoid using any script
debuggers. Just good debuging code that can build stack traces will
suffice. If you overload window.error, you can read the exact stack
trace in IE by jumping up the call stack through
arguments.callee.caller(.caller...)

Thats all I can think of off the top of my head. If you are having any
specific issues, please post the details.

Tim
Jul 23 '05 #8
.... Oops. Fat fingered the title. Will re-post as response in proper thread.

JD
Jul 23 '05 #9
go**********@yahoo.com (Artist) wrote in message news:<de**************************@posting.google. com>...
Mozilla and IE works different with Javascript.
I have Javascript Code which works fine with Mozilla
and it breaks with Internet Explorer.

I like to convert my code to work with both the browser.

What are the standard tools for the same?

Is there something which is mozilla specific that I should avoid to
have it working with internet explorer?

Thanks.!


First of all, there should be no need to convert your code. If you are
doing alot of complex DOM stuff, you may need to do some simple
browser detection and flip object and property references depending on
the browser. You should always use Moz as the base and if it does not
work in IE, then use an alternate code for IE in those cases.

For the most part, IE does support most open (mozilla) standards. Here
are a couple of areas that it does differ significantly.

Objects:
Although IE adds any HTML Element with an ID property to the
namespace to the 'all' property of 'document' object (which is a
default global reference after window I believe), the use of this
should be avoided at all costs. Instead always use
document.getElementById. Its the standard and will still work in IE.
The reverse is not true.

Event listeners:
In IE you cannot use ~Object~.addEventListener. You must directly
assign with either an inline assignment or ~object~.~eventname~ =
function handler(){... or equivalent. When you use the
~object.~eventname~ methodology, Mozilla by default assigns the event
object as an argument. IE does not. You will need to access the method
through window.event (or just event since window is the default global
namespace)

Arrays:
Mozilla is a little more flexible. With the array:
`["one","two","three",]`, Moz will ignore the last element and will
return an array of len 3. IE will return an array of Len 4 with the
last element as undefined. This can cause issues where you have server
code that iteratively generates JS arrays for you.

Form Elements:
Although its a good idea to use
window.forms["formname"]["elementname"] since it works in both
browsers, IE has a bug where if the first character is a number it
does not recognize the element. Generally I avoid using numbers as the
first character in elements because of this bug.

Regarding Tools, I just use a text editor and set up IE to dump any
errors to the screen (tools>internet options>advanced>display a
notification about every script error). I avoid using any script
debuggers. Just good debuging code that can build stack traces will
suffice. If you overload window.error, you can read the exact stack
trace in IE by jumping up the call stack through
arguments.callee.caller(.caller...)

Thats all I can think of off the top of my head. If you are having any
specific issues, please post the details.

Tim
Jul 23 '05 #10

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

17 posts views Thread by Ian | last post: by
16 posts views Thread by zwetan | last post: by
28 posts views Thread by Noone Here | last post: by
3 posts views Thread by sqpost | last post: by
4 posts views Thread by Lando | last post: by
13 posts views Thread by Walton | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.