Question

我已经在一家保险公司的申请表上工作了一段时间。他们出售旅游保险。

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

我已经创建了一个正确计算日期的函数，并且我已使用手动指定的日期值对其进行了测试。

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

我尝试做的是使用第二个框的onblur来访问该功能并将日期吐出到'days'框中。我很快意识到在JS日历的代码放入日期之前触发了onblur，因此函数没有日期，函数也没有运行。

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

所以我接下来尝试做的是使用Interval来触发函数，这是我遇到问题的地方。

以下是我的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 []列出了要显示日期的框的名称。

我甚至无法测试间隔部分，因为出于测试目的，我甚至无法使用手动指定的值=“date”运行daysBetween()一次，它根本无法运行

问题非常简单：document.getElementById(namestart[i]).value没有拉出一个值，它只是挂起脚本，因为它无法找到值。我也尝试使用form_name.elements().value表示法和form_name.element_name.value表示法无效。

我真的很难过，因为我可以告诉代码应该正常工作，我给出了一个项目名称的列表，我告诉脚本使用它来访问它们 - 我已经使用过，并多次看到work getElementByID。

我非常感谢任何协助，因为我不太清楚从哪里开始。

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

Answer 1

我认为发生的事情是你的daysBetween函数在DOM准备好之前执行，这会引发错误并且会破坏你的其余javascript。要解决此问题，您需要将对daysBetween的调用放入window.onload的回调中，或将其附加到日历中的回调中。

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

JavaScript计算两个日期之间的差异，显示文本输入中的数字

1 个答案: