Javascript的getElementById在我的循环中不起作用

Question

我遇到了一个我一直在处理的函数的问题。此功能的目的是获取两组文本输入框内的日期，计算两者之间的差异，然后将该天数置于第三组框中。我的功能如下所示。

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; 

    } 
} 

变量在开头引用的三个数组仅包含我希望访问的表单元素的名称。我已经使用警告框测试了开始，结束和结束变量，并且如果代码中的显示差异注释下没有该行，循环运行正常。我也经历了并确保所有的名字都符合，而且他们确实符合。此外，我已经手动运行该页面八次（有八组框），每组名称，并成功地显示'NaN'在日期框（我没有数据在源框中，因此NaN是预期的行为）。

当我运行如下所示的函数时会发生的是，第一组文本框按预期工作。然后循环停止。所以我的问题很简单，即使名称[0]值起作用，为什么循环与getElementById挂起，它会找到文本框并将计算出的差异放在框中。名称文本框[1]不起作用，循环挂起。

如果您需要我的文本框的更详细的代码，我可以提供它，但他们遵循下面的简单模板。

// 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=""/> 

感谢您的任何帮助提前。

编辑：注意到的意见我想我会添加我的数组定义引用。这些都是在calcdate.js文件中的函数上面定义的。

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"; 

我引用文件，并调用我的函数，我的头这样：

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

Answer 1

既然你说out包含一个名字，你可能要改变

document.getElementById(out).value = diff; 

到

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

或者你实际上可以只添加id属性到您的HTML和集它与name属性的值相同，您可以避免更改JavaScript。

getElementById通过其id属性获取元素，getElementsByName获取具有指定名称属性的所有元素并将其作为数组返回。在HTML中，id应该是唯一的，这就是getElementById只返回1个元素的原因。

Answer 2

首先，你无法通过其ID引用一个对象时，它不会有一个ID 。

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