Does Javascript vary between IE and Firefox?

[PeterCharles]

I'm only a casual coder who sometimes uses Javascript on my web pages, pages usually composed in FrontPage editor.
I have one page that gets user input from two boxes, then uses these values to calculate a value using Javascript which is displayed in a third box.
It works fine when I test it in FrontPage, I upload it and it works fine in IE, but it fails to work in Firefox!

What am I missing here?

[DrDoc]

Welcome to WebmasterWorld! [WebmasterWorld.com]

Typically, I would say no. But, there are some subtle differences. In recent versions of IE (6 and later) there are really no major differences as compared to Firefox. But, that doesn't mean that code produced by various editors are not still using IE proprietary objects. Since IE6 obviously still supports the proprietary script, the result may be something that works in IE, but not in FF.

Let me guess -- the script uses

document.all

?

[Bernard Marx]

There are very few differences, esp for the casual coder, when it comes to the "J" scripting languages used in browsers {Javascript, JScript}. The languages are, as intended, very nearly twins.

The big differences, historically, have been in the object models offered by the browsers themselves.

..but since this wasn't really the question being asked, I'll cease my hair-splitting.

The biggest cause for threads entitled: "Why doesn't my script work in ..." on any browser scripting forum, have traditionally been the non W3C referencing system that IE initially used, and continues to support. It found its way into many MS tutorials and examples.

For instance, to reference an element with id, "test", you can do either of these:

document.all.test
test

Yes, element ids actually become part of the global scripting namespace. Quite convenient in a way.

At some point a while back these "Why .." threads dried up. The reason is that other browser producers got tired of all the sloppy coders making sites that didn't work with their browsers. Both Mozilla and Opera now secretly support both the above referencing methods - although you will get a warning in your Javascript console, if you care to look.

Try it:

<p id="test">Hello</p>
<script type="text/javascript">
alert(document.all.test.innerHTML)
alert(test.innerHTML)
</script>

..just as they found innerHTML useful too.

Conclusion: The problem may lie elsewhere.

<edit>
..and then again, it might not. Input boxes may be a different matter.
</edit>

[DrDoc]

You explain things so well, Bernard Marx :)

[PeterCharles]

It might be the boxes...
So it might not be the Javascript, it might be the HTML?
Actually in IE this HTML only accepts numbers in the two input boxes, but in Firefox I can type letters as well.
Hmmmmm!

<tr>
<td width="33%">Side Angle A <input name="AngleA" onkeypress="return numbersonly()"
size="6" value="45" tabindex="1"> degrees</td>
<td width="33%">Side Angle B <input name="AngleB" onkeypress="return numbersonly()"
size="6" tabindex="2" value="45"> degrees</td>
<td width="34%">Valley Angle C <input type="text" name="AngleC" size="6" tabindex="3">
degrees</td>
</tr>
<tr>
<td width="100%" colspan="3" align="center"><input type="button" onclick="calc(form)"
value="Calculate" name="B1" tabindex="4"></td>
</tr>

[DrDoc]

What does the

numbersonly()

function look like?

[PeterCharles]

Here it is, but just for the moment I can't remember where it came from .....

function numbersonly() {
if (event.keyCode < 48 ¦¦ event.keyCode > 57) return false;
}

[DrDoc]

I haven't tested this, but I believe this will work:

<input name="AngleA" onkeypress="return numbersonly(event)" size="6" value="45" tabindex="1">

function numbersonly(e) {
if (e.keyCode < 48 ¦¦ e.keyCode > 57) return false;
}

[PeterCharles]

Well it still works in IE, but in Firefox I can't change the default values at all now?

Anyway, thanks for thinking about it.

[Bernard Marx]

The browsers behave differently wrt triggering events on certain keys, for the key event types {keypress, keyup, keydown}

Mozilla is triggering a keypress event for these useful keys too

[backspace],[del],[<],[>]
That is
8,46,37,39

function numbersonly(e)
{
 var kc = e.keyCode;
 return (kc>=48 && kc<=57) ¦¦ !!{8:1,46:1,37:1,39:1}[kc];
}

Tip: For getting normalised key values across browsers for characters use:

var kc = e.which¦¦e.keyCode;

[edited by: DrDoc at 12:26 am (utc) on Feb. 5, 2006]

[PeterCharles]

Thanks.
Any references that I can read up on to avoid messing things up in future?