Why is document.DOM-object.property null in legacy application

Question

I can't find a plausible explanation for the following behaviour of javascript code. I am not very familiar with javascript and if the following code was ever valid.

In a migrated legacy application there is code along those lines:

function myFunctionName(name)
{
    for(k=0; k < document.budget_sections.length; ++k) {
    //...do something
    }
}

Please note the document.budget_sections.length part. In production this code throws an error saying cannot access property length of null. In my dev environment this runs fine. Since budget_sections is the Id of a form element (<form id="budget_sections" method="post" runat="server">)I changed the code to the syntax which is known to me:

function myFunctionName(name)
{
    var form = document.getElementById("budget_sections");
    for(k=0; k < form.length; ++k) {
    //...do something
    }
}

This syntax / notation is used throughout the whole application and works on most pages. The question for me here is: why did and still does this old code work and why might it break now? I have never read the notation document.DOM-object.xxx before and I can't find documentation about it.

score 1 · Accepted Answer · answered Apr 07 '15 at 11:24

1

Since budget_sections is the Id of a element

Nope, it's name of the form.

document.formname.length

still works.

I can't find documentation about it.

Here is one such example in MDN for document.images.length

MDN link

All these are properties in your document. You can read more about it in that page left sidebar. You will find documentation for all of the properties similar to document.DOM_Object.property

answered Apr 07 '15 at 11:24

mohamedrias

18,326
2
38
47

This clears things up a bit. But I worte Id correctly. It is defined as `
` and not as name.
– Marco Apr 07 '15 at 11:27
You can give it a shot. Create a form with `id="budget_sections" ` and another form with `name="budget_sections"`. The DOM specification allows only `name` attribute to be reference not the ID – mohamedrias Apr 07 '15 at 11:30

score 1 · Answer 2 · answered Apr 07 '15 at 11:30

1

I think that is old notation. If you set name attribute of your forms to "budget_sections" instead of id then it will work:

<!DOCTYPE html>
<html>
<body>

<form name="xx">
  Form 1
</form>
<form name="xx">
  Form 2
</form>

<button onclick="alert(document.xx.length)">Number of forms</button>

</body>
</html>

or you can get same result with forms instead of name value:

<!DOCTYPE html>
<html>
<body>

<form name="xx">
  Form 1
</form>
<form name="xx">
  Form 2
</form>

<button onclick="alert(document.forms.length)">Number of forms</button>

</body>
</html>

answered Apr 07 '15 at 11:30

Zivko

367
5
16

You have explanation about ID and name attribute on http://stackoverflow.com/questions/1397592/difference-between-id-and-name-attributes-in-html – Zivko Apr 07 '15 at 11:33
From what I take here, the original creator of this code has messed up ID and Name and it somehow worked anyway. – Marco Apr 07 '15 at 11:51

score 0 · Answer 3 · answered Apr 07 '15 at 11:24

0

It should use if I remember my IE6 days correctly document.forms['budget_sections'] to get the form items...

There was a difference between how IE and Netscape handled things. But i'm not sure since that was more than 15 years ago heh.

answered Apr 07 '15 at 11:24

Tschallacka

27,901
14
88
133

Why is document.DOM-object.property null in legacy application

3 Answers3