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;

    }
}

变量在开头引用的三个数组只包含我希望访问的表单元素的名称。我已经用一个警告框测试了start、end和out变量，如果代码中没有Show Difference注释下的行，循环运行良好。我也检查了所有的名字，确保他们都匹配。此外，我已经手动运行页面八次（有八组框），每组名称，它成功地在day框中显示'NaN'（到目前为止，我在源框中还没有数据，所以NaN是预期的行为）。

当我运行如图所示的函数时，发生的情况是第一组文本框按预期工作。然后循环停止。所以我的问题很简单，为什么循环挂起getElementById即使名称[0]值工作，它找到输入框并将计算的差异放入框中。名称[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=""/>

提前谢谢你的帮助。

编辑：注意到这些评论，我想我应该为referenece添加数组定义。这些都是在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;

或者你可以直接在html中添加id属性，并将其设置为与name属性相同的值，这样就可以避免更改javascript。

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

Answer 2

首先也是最重要的一点是，当对象没有ID时，不能通过其ID引用对象。