Worlds Colliding Violently

Say you have a bit of code that looks like this:

<script language="javascript" type="text/javascript">
<!--
function goodBrowserCheck(FormID) {
  alert(document.getElementById(FormID).name);
}
//-->
</script>


and your HTML looks like this:

<form name="testform" id="testform" method="post" action="menu.php">
<a href="javascript:goodBrowserCheck('testform')">Link Here</a>
</form>


Simple stuff. You should get an alert reading “testform”. And in both Mozilla and IE, you do. No surprises there. But what if we change our form tag to look like this instead:

<form name="testform" method="post" action="menu.php">
<a href="javascript:goodBrowserCheck('testform')">Link Here</a>
</form>

In Moz, we get a nice error on our console: “Error: document.getElementById(FormID) has no properties”

However, what do we get in IE 5.5 and 6.0? An alert reading “testform”.

IE’s implementation of getElementById is severely flawed; flawed so much, in fact, that it blatantly ignores the very name of the function you are using! Get an Element By it’s ID! No ID exists in that second example, and yet, IE returns a value. When it can’t find the ID you’re looking for on an element, it grabs any element that has a name attribute matching the ID you’re looking for. This is not documented anywhere (as far as I can tell), and I probably lost about an hour of my time figuring out why IE worked on a much more complex script, whereas Moz failed. Moz was actually doing the correct thing by failing.

Let’s take this a step further, shall we? Say we modify our HTML to look like this:

<form name="testform" method="post" action="menu.php">
<input type="hidden" name="test!" ID="testform">
<a href="javascript:goodBrowserCheck('testform')">Link Here</a>
</form>

In this case, we have an element with the name “testform”, and another element with the ID of “testform”. The expected result when getting the name attribute of an element with an ID of “testform” is to get the name value for the hidden field, which is “test!”. That’s what Mozilla gives us.

IE gives us “testform”.

So, even worse, it ignores an element which does have the ID we are looking for, because another element with the same name is its parent.

We all knew that Moz was a better browser to begin with, and we certainly knew that it’s Javascript Debugging was far superior to IE’s, but this takes the cake in my opinion. If you’re working with Javascript, you should be working with Mozilla, plain & simple.

January 27th, 2004 | Tags: getelementbywhat | Category: General geek related entries., Mozilla | Subscribe to comments | Both comments and pings are currently closed