Javascript's getElementById is not working in my loop

Question

I have an issue with a function I have been working on. The purpose of this function is to take the dates that are inside two sets of text input boxes, calculate the difference between the two, and then place that number of days in a third set of boxes. My function is shown below.

function daysBetween() {

for (var i = 0; i < 8; i++) {   

//Get the value of the current form elements
    var start = namestart[i];
    var end = namend[i];
    var out = names[i];

//Duration of a day
    var d = 1000*60*60*24;

// Split Date one
    var x = start.split("-");
// Split Date two
    var y = end.split("-");

/// // Set Date one object
    var d1 = new Date(x[0],(x[1]-1),x[2]);
//  // Set Date two object
    var d2 = new Date(y[0],(y[1]-1),y[2]);
//  
//  //Calculate difference
    diff = Math.ceil((d2.getTime()-d1.getTime())/(d));

    //Show difference
    document.getElementById(out).value = diff;

    }
}

The three arrays referenced by the variables at the beginning contain simply the names of the form elements I wish to access. I've tested the start, end, and out variables with an alert box and the loop runs fine if I do not have the line under the Show Difference comment in the code. I have also gone through and made sure that all names match and they do. Also I have manually run the page eight times (there is eight sets of boxes) with each set of names and it successfully displays 'NaN' in the day box (I have no data in the source boxes as of yet so NaN is the expected behaviour).

When I run the function as shown here what happens is that the first set of text boxes works as intended. Then the loop stops. So my question is quite simple, why does the loop hangup with getElementById even though the names[0] value works, it finds the text box and puts the calculated difference in the box. The text box for names[1] does not work and the loop hangs up.

If you need more detailed code of my text boxes I can provide it but they follow the simple template below.

// namestart[] array
<input type="text" name="start_date_one" id="start_date_one" value=""/> <br />
// namend[] array
<input type="text" name="end_date_one" id="end_date_one" value=""/> <br />
// names[] array
<input type="text" name="day_difference_one" id="day_difference_one" value=""/>

Thanks for any help in advance.

Edit: Noticing the comments I figured I would add my array definitions for refernece. These are defined immediately above the function in my calcdate.js file.

var namestart = new Array ();
namestart[0] = "trav_emer_single_date_go";
namestart[1] = "trav_emer_extend_date_go";
namestart[2] = "allinc_single_date_go";
namestart[3] = "allinc_annual_date_go";
namestart[4] = "cancel_date_go";
namestart[5] = "visitor_supervisa_date_go";
namestart[6] = "visitor_student_date_go";
namestart[7] = "visitor_xpat_date_go";

var namend = new Array ();
namend[0] = "trav_emer_single_date_ba";
namend[1] = "trav_emer_extend_date_ba";
namend[2] = "allinc_single_date_ba";
namend[3] = "allinc_annual_date_ba";
namend[4] = "cancel_date_ba";
namend[5] = "visitor_supervisa_date_ba";
namend[6] = "visitor_student_date_ba";
namend[7] = "visitor_xpat_date_ba";

var names = new Array ();
names[0] = "trav_emer_single_days";
names[1] = "trav_emer_extend_days";
names[2] = "allinc_single_days";
names[3] = "allinc_annual_days";
names[4] = "cancel_days";
names[5] = "visitor_supervisa_days";
names[6] = "visitor_student_days";
names[7] = "visitor_xpat_days";

I reference the file and call my function in my header as such:

<script type="text/javascript" src="calcdate.js"></script>
<script type="text/javascript">
window.onload = daysBetween;
</script>

Answer 1

since you say out contains a name you might want to change

document.getElementById(out).value = diff;

to

document.getElementsByName(out)[0].value = diff;

or you could actually just add the id attribute to your html and set it to the same value as the name attribute and you can avoid changing your javascript.

getElementById gets the element by its id attribute, getElementsByName gets all of the elements with the specified name attribute and returns it as an array. In HTML id is supposed to be unique which is why getElementById returns only 1 element

Answer 2

First and foremost, you can't reference an object by its ID when it doesn't have an ID.

<input type="text" id="start_date_one" name="start_date_one" />