用户未输入几行时的 JavaScript 计算(添加剩余的行值)
javascript calculation when user did not entered few rows (add remaining row values)
在这里,我发布了我的javascript和html编码。如果用户单击"计算总计"按钮,它应将所有值相加并显示在文本框中。这非常有效。但问题是如果用户输入(此处总共 7 行 ftotal,ftotal1,ftotal2,ftotal3,ftotal4,ftotal5,ftotal6(5 行值,当他们单击计算总计按钮时,文本字段显示 NaN。我希望如果他们没有输入几行,剩余的行将被计算并在他们单击按钮时显示在文本框中.......???
JavaScript
function calfinal(frm) {
var ftotal = frm.ftotal.value
var ftotal1 = frm.ftotal1.value
var ftotal2 = frm.ftotal2.value
var ftotal3 = frm.ftotal3.value
var ftotal4 = frm.ftotal4.value
var ftotal5 = frm.ftotal5.value
var ftotal6 = frm.ftotal6.value
var calc = 0
ftotal = parseFloat(ftotal)
ftotal1 = parseFloat(ftotal1)
ftotal2 = parseFloat(ftotal2)
ftotal3 = parseFloat(ftotal3)
ftotal4 = parseFloat(ftotal4)
ftotal5 = parseFloat(ftotal5)
ftotal6 = parseFloat(ftotal6)
answer = ftotal + ftotal1 + ftotal2 + ftotal3 + ftotal4 + ftotal5 + ftotal6
frm.calc.value = answer
}
.HTML
<tr>
<td height="30" class="tabform"><input type="text" size="10" name="ftotal" /></td>
</tr>
<tr>
<td height="30" class="tabform"><input type="text" size="10" name="ftotal1"/></td>
</tr>
<tr>
<td height="30" class="tabform"><input type="text" size="10" name="ftotal2"/></td>
</tr>
<tr>
<td height="30" class="tabform"><input type="text" size="10" name="ftotal3"/></td>
</tr>
<tr>
<td height="30" class="tabform"><input type="text" size="10" name="ftotal4"/></td>
</tr>
<tr>
<td height="30" class="tabform"><input type="text" size="10" name="ftotal5"/></td>
</tr>
<tr>
<td height="30" class="tabform"><input type="text" size="10" name="ftotal6"/></td>
</tr>
<tr>
<td height="15"><input type="button" value="Calculate Total" onClick="calfinal(this.form);" /></td>
<td height="15" align="center"><input type="text" size="10" name="calc" readonly="readonly" /></td>
</tr>
使用函数 isNaN 验证每个值都是一个数字。
如果不是,则不要将其包含在计算中或将其设置为 0;
所以像这样:
function calfinal(frm) {
var ftotal = frm.ftotal.value
var ftotal1 = frm.ftotal1.value
var ftotal2 = frm.ftotal2.value
var ftotal3 = frm.ftotal3.value
var ftotal4 = frm.ftotal4.value
var ftotal5 = frm.ftotal5.value
var ftotal6 = frm.ftotal6.value
var calc = 0
ftotal = (!isNaN(ftotal) && ftotal!="") ? parseFloat(ftotal) : 0
ftotal1 = (!isNaN(ftotal1) && ftotal1!="") ? parseFloat(ftotal1) : 0
ftotal2 = (!isNaN(ftotal2) && ftotal2!="") ? parseFloat(ftotal2) : 0
ftotal3 = (!isNaN(ftotal3) && ftotal3!="") ? parseFloat(ftotal3) : 0
ftotal4 = (!isNaN(ftotal4) && ftotal4!="") ? parseFloat(ftotal4) : 0
ftotal5 = (!isNaN(ftotal5) && ftotal5!="") ? parseFloat(ftotal5) : 0
ftotal6 = (!isNaN(ftotal6) && ftotal6!="") ? parseFloat(ftotal6) : 0
if(!isNaN(ftotal6))
{
console.log(ftotal6)
}
answer = ftotal + ftotal1 + ftotal2 + ftotal3 + ftotal4 + ftotal5 + ftotal6
frm.calc.value = answer
}
这是它工作的示例 http://jsfiddle.net/CdsBW/
编辑可能将其缩短为一个函数:
function validateNumber(number)
{
return (!isNaN(number) && number!="") ? parseFloat(number) : 0
}
我没有看到用户如何输入任何值,因为输入字段都是只读的。 无论如何,为什么不将值初始化为 0.0 或编写自己的函数来在调用 parseFloat 之前检查值?
你可以
试试这个,用户在添加之前必须输入值,如果万一你也可以提供默认值演示
function calfinal(frm)
{
var ele =frm.getElementsByTagName('input');
for(var i=0;i<ele.length-1;i++) // -1 is for excluding last input element used to diplay result
{
if(ele[i].value == "" && ele[i].getAttribute('type')=='text')
{
alert("required field");
ele[i].focus();
return;
}
}
// below this write your code for addition
}
如果您只想添加提供的值框,那么您可以尝试
function calfinal(frm)
{
var ele =frm.getElementsByTagName('input');
var sum=0;
for(var i=0;i<ele.length-1;i++)
{
if(ele[i].value != "" && ele[i].getAttribute('type')=='text')
{
sum += parseFloat(ele[i].value);
}
}
// sum will contain the result
}
相关文章:
- 在添加的输入字段中计算TOTAL
- jQuery - 动态表计算在添加 .toFixed(1) 时中断
- jQuery 计算动态添加的行
- 使用 JavaScript 计算并添加表单输入的值
- 计算通过javascript向表中添加的行数
- 从HTML表单中获取计算得到的JavaScript数据,并将其作为新元素添加到相同的表单操作中以使用PHP保存
- Knockout.js我应该如何将计算值添加到observaleArray中
- Backbone.js在模型后面添加了一个计算属性's已解析
- 计算具有特定类的元素的数量,然后添加对它们进行编号的ID
- 如何在运行时向计算可观察量添加其他数组项
- Jquery计算元素中的字符,并为太短的字符添加填充
- 循环 HTML 表并将相同的项目及其计算的金额添加到另一个表中
- 如何使用 jQuery 计算动态添加到页面的列表项数
- Javascript:将内联样式添加到页面中具有特定计算样式属性的元素
- 用户未输入几行时的 JavaScript 计算(添加剩余的行值)
- Jquery 添加计算值
- 如何添加带有下划线 js 的计算属性
- 随机日期计算引导数据选取器,将天数添加到特定日期
- 挖空添加计算中断可观察数组
- 计算动态添加的表单元素的总和