两个相同的 javascript 代码以不同的方式表现（在不同的浏览器中）

Question

i have a form with name frmOrderReschedule and an hidden element frmOrderReschedule . i tried to access it in this way-

document.frmOrderReschedule.newSalesOrderNumber.length

it gave me error document.frmOrderReschedule.newSalesOrderNumber.length is undefined , but when i try in fallowing way it works properly

document.getElementsByName('newSalesOrderNumber').length;  

this is happening in Mozila only.Any one can throw some light on it, why it's happenning like this. Thanks in Advance!!!

Answer 1

Following your comment I deduct, that the field can be present one or multiple times. In that case document.frmOrderReschedule.newSalesOrderNumber (or document.forms["frmOrderReschedule"].elements["newSalesOrderNumber"] ) can return different types.

If there are multiple controls, it will return a collection, which will have a length property. If there is only one control, then it will return a direct reference to that control, which - obviously - doesn't have a length. That means, if you use that syntax you need to distinguish between the two variants (or even three variant, in case the field isn't there):

var x = document.forms["frmOrderReschedule"].elements["newSalesOrderNumber"];
if (x) {
    if (x.length) {
        alert("There are " + x.length + " controls.")
    } else {
        alert("One control with value: " + x.value);
    }
} else {
    alert("None");
}

Working example: http://jsfiddle.net/H4Lks/1/

document.getElementsByName('newSalesOrderNumber') on the other hand always returns a collection, even if there are none or one, so it always has a length .