0

我一直在为一家保险公司处理申请表。他们卖旅游保险。

作为一个额外的小功能,他们要求我获取用户输入的出发日期和返回日期,计算它们之间的天数,然后在“天数”框中显示数字。其目标是让用户可以输入两个日期并自动计算天数。

我已经创建了一个可以正确计算日期的函数,并且我已经使用手动分配的日期值对其进行了测试。

使用 JS 日历时出现了我的问题。

我试图做的是使用第二个框的 onblur 来访问该功能并将日期吐出到“天”框中。我很快意识到 onblur 是在 JS 日历的代码输入日期之前触发的,因此该函数没有日期并且该函数不会运行。

然后我尝试使用 onchange 并意识到它也不起作用,因为用户实际上并没有更改日期,代码是。

所以我接下来尝试做的是使用间隔来触发该功能,这就是我遇到问题的地方。

下面是我的 caldate.js 文件中的代码,该文件附加到我的 HTML 表单中。

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


    function daysBetween() {

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

//Get the value of the current form elements
var start = document.getElementById(namestart[i]).value;
var end = document.getElementById(namend[i]).value;

//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(names[i]).value = diff;

}
}

function interval() {
var int = setInterval(function(){daysBetween()},500);
}

开头的数组列表是我需要访问的元素的名称。我打算用我的函数做的是在每个间隔运行一个循环来检查所有 8 个元素。namestart[] 和 namend[] 是用户输入的开始和结束日期。names[] 列出要显示日期的框的名称。

我什至无法测试间隔部分,因为daysBetween()出于测试目的,我什至无法使用手动分配的 value="date" 运行一次,它根本不会运行。

这个问题真的很简单:document.getElementById(namestart[i]).value不是拉出一个值,它只是挂起脚本,因为它找不到值。我也尝试过使用form_name.elements().value符号和form_name.element_name.value符号无济于事。

据我所知代码应该可以工作,我真的很难过,我给出了项目名称的列表,并告诉脚本使用它们来访问它们 - 我使用过并且多次看到工作 getElementByID。

任何帮助将不胜感激,因为我不太确定从这里去哪里。

这里要求的是一个 JS fiddle 链接:http: //jsfiddle.net/L2H9N/ - 纯 JS 没有库。

4

1 回答 1

0

我认为正在发生的是你的 daysBetween 函数在 DOM 准备好之前执行,这会引发错误并破坏你的 javascript 的其余部分。要修复它,您需要将对 daysBetween 的调用放入 window.onload 的回调中,或将其附加到日历中的回调中。

在继续对变量进行计算之前,合并您的空值或至少检查它们也是一个好主意。

于 2012-10-10T19:52:31.237 回答