Main Page Content
Javascript Naming No No
When naming objects on a page, most commonly images and form elements, NEVER name any object with the same name.
For instance, let's imagine you had a rather simple page like this:
<HTML> <HEAD> <TITLE>A simple page</TITLE> <SCRIPT LANGUAGE="JavaScript"> <! -- function checkValue() { alert('The form value is ' + document.USER_INFO.USER_ID.value); } // --> </SCRIPT> </HEAD><BR><BODY> <FORM NAME="USER_INFO"> <TABLE> <TR> <TD> <IMG NAME="USER_ID" SRC="images/required.gif" HEIGHT="20" WIDTH="20" BORDER="0" ALT="Required"> </TD> <TD> <INPUT TYPE="TEXT" NAME="USER_ID" SIZE="10" VALUE="" onBlur="checkValue()"> </TD> </TR> </TABLE> </FORM></BODY></HTML>Notice that both the image and the form input element share the same name. What will happen in some browsers when the onBlur() function is called, the browser will give a JavaScript error saying that
document.USER_INFO.USER_ID is undefinedor a similar error. The browser thinks it's trying to find the value of the image object named USER_ID, which it can't do because image objects do not have a VALUE attribute associated with them.
The same would be true if you were trying to access an image object with the same name as a FORM element that it followed. It can't find the image because it occurs right after a FORM element with the same name. Since .src is not valid for a FORM element, it returns an error.
So, in conclusion, remember that if you have elements that need to have the same or similar names for functionality to not make them share names or your perfectly useful JavaScript functions will break horribly for some, if not all of your users.
