无法通过javascript函数的自动计算设置html元素值
Unable to set html element value from automatic calculation from javascript function
我编写了一个简单的JavaScript函数，以我想要的格式计算日期差。它写在函数clt(i)中。它非常正确地打印LoS_days、Los_months和Los_years值。我使用这些计算值作为另一个称为函数total()的函数的输入。它是用来添加这三个日期差异的。但工作不正常。原因是它没有正确地从html表单中获取值。我附上完整的代码。
<html>
<head><script language="javascript" src="cal2.js">
</script>
<script language="javascript" src="cal_conf2.js"></script>
<script type='text/javascript'>
function total(){
var td;
var fd=document.getElementById("LoS_days1").value;
var sd=document.getElementById("LoS_days2").value;
var ld=document.getElementById("LoS_days3").value;
var tm;
var fm=document.getElementById("LoS_months1").value;
var sm=document.getElementById("LoS_months2").value;
var lm=document.getElementById("LoS_months3").value;
var ty;
var fy=document.getElementById("LoS_year1").value;
var sy=document.getElementById("LoS_year2").value;
var ly=document.getElementById("LoS_year3").value;
td = (fd +sd +ld);
var rd = td%30;
var cm = Math.floor(td/30);
document.getElementById("Totalexp_day").value=rd;
tm = (cm + fm +sm +lm);
var rm = tm%12;
var cy = Math.floor(tm/12);
document.getElementById("Totalexp_month").value=rm;
ty = (cy + fy +sy +ly);
document.getElementById("Totalexp_year").value=ty;
//document.write("Difference: "+rd+" remaining days; "+cm+" carry forward months; "+td+" total days; ");
}
function clt(i){
// start year may be a leap year. if(startYears%4==0) { datesPerMonth[0]=29; }
var datesPerMonth=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var x=document.getElementById("PoS_from"+i);
var startDate=x.value;
var y=document.getElementById("PoS_to"+i);
var endDate=y.value;
//var startDate='2015/02/21';
//var endDate='2015/03/01';
var startExplode=startDate.split('/');
var startYears=parseInt(startExplode[0],10);
var startMonths=parseInt(startExplode[1],10);
var startDays=parseInt(startExplode[2],10);
var endExplode=endDate.split('/');
var endYears=parseInt(endExplode[0],10);
var endMonths=parseInt(endExplode[1],10);
var endDays=parseInt(endExplode[2],10);
endDays++; if(endDays>datesPerMonth[endMonths]) { endDays=1; endMonths++; if(endMonths==13) { endMonths=1; endYears++; } }
startDate=new Date(startDate).getTime();
endDate=new Date(endDate).getTime();
if((startYears < endYears || startMonths < endMonths || startDays < endDays) && startDate < endDate) {
var dateDifference=endDate-startDate;
if(endYears%4==0) { datesPerMonth[1]=29; }
if(endYears%100==0 && endYears%400>0) { datesPerMonth[1]=28; }
if(startDays<=datesPerMonth[startMonths]) {
if(endDays<=datesPerMonth[endMonths]) {
var diffYears=endYears-startYears; // if(endMonths < startMonths || (endMonths == startMonths && endDays < startDays)) { diffYears--; }
var diffMonths=endMonths-startMonths; if(diffMonths < 0) { diffYears--; diffMonths=(12+diffMonths); }
var diffDays=endDays-startDays; if(diffDays < 0) { diffMonths--; if(diffMonths<0) { diffYears--; diffMonths=(12+diffMonths); } diffDays=datesPerMonth[(endMonths==1?12:(endMonths-1))]+diffDays; }
document.getElementById("LoS_year"+i).value=diffYears;
document.getElementById("LoS_months"+i).value=diffMonths;
document.getElementById("LoS_days"+i).value=diffDays;
//document.write("Difference: "+diffYears+" years; "+diffMonths+" months; "+diffDays+" days");
}
else { document.write('Bad end'); }
}
else { document.write('Bad start'); }
}
}
</script>
</head>
<body>
<form name ="applicationform_A01" id ="applicationform_A01" method ="post" action="savemyform.php" enctype = "multipart/form-data" onsubmit = "return ValidateForm()">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="76%" height="125">
<tr>
<td width="5%" rowspan="2" align="center" height="33"><font face="Arial" size="2">Sl.
No.</font></td>
<td width="24%" rowspan="2" align="center" height="33"><font face="Arial" size="2">
Employer Name with Address</font></td>
<td width="22%" rowspan="2" align="center" height="33">
<span lang="EN-US" style="font-size: 10.0pt; font-family: Arial">
Post/Designation and Pay</span></td>
<td width="29%" colspan="2" align="center" height="16"><font face="Arial" size="2">
Period of Service</font></td>
<td width="20%" colspan="3" align="center" height="16"><font face="Arial" size="2">
Length of Service</font></td>
</tr>
<tr>
<td width="14%" align="center" height="16"><font face="Arial" size="2">From</font></td>
<td width="15%" align="center" height="16"><font face="Arial" size="2">To</font></td>
<td width="7%" align="center" height="16"><font face="Arial" size="2">Years</font></td>
<td width="6%" align="center" height="16"><font face="Arial" size="2">Months</font></td>
<td width="7%" align="center" height="16"><font face="Arial" size="2">Days</font></td>
</tr>
<tr>
<td width="5%" align="center" height="23"><font face="Arial" size="2">01</font></td>
<td width="24%" height="23">
<input type="text" name="employer1" size="30"></font>
</td>
<td width="22%" height="23"><font face="Arial"><input type="text" name="post1" size="30"></font></td>
<td width="14%" height="23"><font face="Arial">
<input type="text" name="PoS_from1" id="PoS_from1" size="10" ><font size="1" color="#0000FF"><a href="javascript:showCal('Calendar4')">calender</a></font>
<font face="Arial"</font></font></td>
<td width="15%" height="23"><font face="Arial">
<input type="text" name="PoS_to1" id="PoS_to1" size="10" onchange="clt(1); total()" ><font size="1" color="#0000FF"><a href="javascript:showCal('Calendar5')">calender</a></font>
<font face="Arial"</font></font></td>
<td width="7%" height="23"><font face="Arial">
<input type="text" name="LoS_year1" id="LoS_year1" size="6" readonly></font></td>
<td width="6%" height="23"><font face="Arial">
<input type="text" name="LoS_months1" id="LoS_months1" size="6" readonly></font></td>
<td width="7%" height="23"><font face="Arial">
<input type="text" name="LoS_days1" id="LoS_days1" size="6" readonly></font></td>
</tr>
<tr>
<td width="5%" align="center" height="21"><font face="Arial" size="2">02</font></td>
<td width="24%" height="21"><font face="Arial">
<input type="text" name="employer2" size="30"></font></td>
<td width="22%" height="21"><font face="Arial"><input type="text" name="post2" size="30"></font></td>
<td width="14%" height="21"><font face="Arial">
<input type="text" name="PoS_from2" id="PoS_from2" size="10" ><font size="1" color="#0000FF"><a href="javascript:showCal('Calendar6')">calender</a></font>
<font face="Arial"></font></font></td>
<td width="15%" height="21"><font face="Arial">
<input type="text" name="PoS_to2" id="PoS_to2" size="10" onchange="clt(2); total()"><font size="1" color="#0000FF"><a href="javascript:showCal('Calendar7')">calender</a></font>
<font face="Arial"</font></font></td>
<td width="7%" height="21"><font face="Arial">
<input type="text" name="LoS_year2" id="LoS_year2" size="6" readonly></font></td>
<td width="6%" height="21"><font face="Arial">
<input type="text" name="LoS_months2" id="LoS_months2" size="6" readonly></font></td>
<td width="7%" height="21"><font face="Arial">
<input type="text" name="LoS_days2" id="LoS_days2" size="6" readonly></font></td>
</tr>
<tr>
<td width="5%" align="center" height="22"><font face="Arial" size="2">03</font></td>
<td width="24%" height="22"><font face="Arial">
<input type="text" name="employer3" size="30"></font></td>
<td width="22%" height="22"><font face="Arial"><input type="text" name="post3" size="30"></font></td>
<td width="14%" height="22"><font face="Arial">
<input type="text" name="PoS_from3" id="PoS_from3" size="10" ><font size="1" color="#0000FF"><a href="javascript:showCal('Calendar8')">calender</a></font>
<font face="Arial"</font></font></td>
<td width="15%" height="22"><font face="Arial">
<input type="text" name="PoS_to3" id="PoS_to3" size="10" onchange="clt(3); total()"><font size="1" color="#0000FF"><a href="javascript:showCal('Calendar9')">calender</a></font>
<font face="Arial"</font></font></td>
<td width="7%" height="22"><font face="Arial">
<input type="text" name="LoS_year3" id="LoS_year3" size="6" readonly></font></td>
<td width="6%" height="22"><font face="Arial">
<input type="text" name="LoS_months3" id="LoS_months3" size="6" readonly></font></td>
<td width="7%" height="22"><font face="Arial">
<input type="text" name="LoS_days3" id="LoS_days3" size="6" readonly></font></td>
</tr>
<tr>
<td width="80%" colspan="5" height="22">
<p align="right"><font face="Arial" size="2">Total Experience </font>
</td>
<td width="7%" height="22"><font face="Arial">
<input type="text" name="Totalexp_year" id="Totalexp_year" size="6" readonly></font></td>
<td width="6%" height="22"><font face="Arial">
<input type="text" name="Totalexp_month" id="Totalexp_month" size="6" readonly></font></td>
<td width="7%" height="22"><font face="Arial">
<input type="text" name="Totalexp_day" id="Totalexp_day" size="6" readonly></font></td>
</tr>
</table>
</form>
</body>
</html>
在/body
标签的结束后添加您的脚本代码，这可能对您的
相关文章：
- 使用谷歌地图api计算距离并将其设置在表格中<td>
- 设置为负数的变量计算结果为true
- 如何在此脚本代码中正确设置此计算和变量
- 在Knockoutjs中设置计算对象的observableArray的更好方法
- Vue.js在计算属性中设置值
- 无法通过javascript函数的自动计算设置html元素值
- 根据选中的按钮运行不同的计算时，设置单选按钮
- 使用jQuery加载文件，计算类的元素并设置间隔比率
- 设置/复制javascript计算样式从一个元素到另一个元素
- 如何获取html标签的计算样式值，然后将值设置为“样式”
- 在 podio 中将计算日期字段设置为 null(因此使用 javascript）
- 如何使用 jQuery 计算和设置元素的高度
- JQuery.post 从服务器获取cookie，但不在我的计算机上设置它们
- 计算最大值并将背景设置为相等的父级
- 将计算结果设置为ng样式标签Angular.js的百分比
- 如何设置容器宽度计算if的子对象的宽度
- 在javascript显示模块模式中计算的淘汰设置
- Knockout-如何同时设置子项和父项的计算属性
- 如何根据另一个截面的计算宽度设置截面的宽度
- 为具有特定计算css属性值的元素数组设置样式
