Martínez wrote:
Hi,
Here's a scaled down version of what I'm working with. It
execututes correctly in IE, but FireFox fails to run it.
The JavaScript Console reports the error
"Error: myform.getElementsByTagName("TD")[1] has no properties"
Why isn't this working? If it's a syntax issue, is there an
alternate method that works across both browsers?
You can do considerably better than just two browser here.
<snip> <body>
<table ><tr><td ></td></tr>
<form >
<tr><td ></td><td ><b>0,34 EUR</b></td></tr></form>
</table>
<!-- MORE HTML CODE HERE --->
<table ><form >
<tr><td ></td><td ><b>0,34 EUR</b></td></tr>
<tr><td><input type="button" name="Submit" value="change"
onclick="change()">
Change form data</td></tr></form></table>
<snip>
I am afraid you problem is the direct consequence of using invalid
mark-up. The relationship between mark-up validity and scripting is that
you will be scripting a DOM and when you need to script it in a way that
is interested in the structure of the DOM (as you are here) it is quite
important that the DOMs you interact with on different browsers are
structurally the same.
Formal validity is not strictly necessary in order to get browsers to
produce structurally consistent DOMs. However, structural validity is
critical. HTML specifies that particular elements may only appear in
particular contexts, your problem here is that a FORM element may not be
a child of a TABLE. With structurally valid HTML there are well
specified and understood rules for translating an HTML document into a
DOM structure, and because those rules are well specified their
application in browsers does result in consistent DOM structures.
When an HTML document is not structurally valid the browser cannot
follow the specified rules and instead it follows error-correction
rules, in an effort to do the best possible job with the document it is
given. Error-correction rules could never be formally specified, indeed
they will often be proprietary secrets known only to the browser's
authors. As a result it is actually unlikely that any two browsers will
do their error-correction in the same way, and they don't.
In the case of Mozilla, encountering your FORM elements in a context
where they are not aloud, the browser moves the form element to the
first preceding location in the DOM in which it would be legal. However,
the TABLE and its contents are not moved so when you attempt to find TDs
that are descendants of FORM you will not find any as the FORM is now
outside the TABLE.
Simply, you fix the problem by moving the opening and closing FORM tags
so they surround the pertinent table. In the long run you will benefit
more from learning the formal rules that apply to HTML structure and
write only structurally valid HTML document. Doing so will significantly
reduce the effort you would have to put into scripting those documents.
Richard.
