Javascript的getElementById在我的循环中不起作用
我对我一直在做的一个函数有个问题。此函数的目的是获取两组文本输入框中的日期，计算两组文本输入框之间的差异，然后将天数放入第三组框中。我的函数如下所示。
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注释下的行，循环就可以正常运行。我还检查并确保所有的名称都匹配，并且它们确实匹配。此外，我手动运行了八次页面(有八组框)，每组名称都成功地在日期框中显示了' NaN‘(到目前为止，我在源框中还没有数据，所以NaN是预期行为)。
当我运行如下所示的函数时，第一组文本框将按预期工作。然后循环停止。所以我的问题很简单，为什么循环挂起了getElementById，尽管names值起作用了，它找到了文本框，并将计算出的差值放入框中。names1的文本框不起作用，循环挂起。
如果你需要我的文本框更详细的代码，我可以提供它，但他们遵循下面的简单模板。
// 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>回答 2
Stack Overflow用户
发布于 2012-11-21 06:14:25
由于您说out包含一个名称，因此您可能想要更改
document.getElementById(out).value = diff;至
document.getElementsByName(out)[0].value = diff;或者，您实际上可以将id属性添加到html中，并将其设置为与name属性相同的值，这样就可以避免更改您的javascript。
getElementById通过其id属性获取元素，getElementsByName获取具有指定名称属性的所有元素并将其作为数组返回。在HTML中，id应该是唯一的，这就是为什么getElementById只返回1个元素
Stack Overflow用户
发布于 2012-11-21 06:14:21
首先也是最重要的，当一个对象没有ID时，你不能通过它的ID来引用它。
<input type="text" id="start_date_one" name="start_date_one" />
https://stackoverflow.com/questions/13483091
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号