用户未输入几行时的javascript计算(添加剩余行值)
这里我发布了我的javascript和html编码。如果用户单击“计算总数”按钮,则应添加文本框中显示的所有值。那很好用。但问题是,如果用户输入了(此处共7行)5行值ftotal、ftotal1、ftotal2、ftotal3、ftotal4、ftotal5、ftotal6,当他们单击“计算总计”按钮时,文本字段显示为NaN。我想,如果他们没有输入几行,当他们单击按钮时,剩余的行将计算并显示在文本框中 JavaScript用户未输入几行时的javascript计算(添加剩余行值),javascript,html,Javascript,Html,这里我发布了我的javascript和html编码。如果用户单击“计算总数”按钮,则应添加文本框中显示的所有值。那很好用。但问题是,如果用户输入了(此处共7行)5行值ftotal、ftotal1、ftotal2、ftotal3、ftotal4、ftotal5、ftotal6,当他们单击“计算总计”按钮时,文本字段显示为NaN。我想,如果他们没有输入几行,当他们单击按钮时,剩余的行将计算并显示在文本框中 JavaScript function calfinal(frm) { var fto
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>
我不知道用户如何输入任何值,因为输入字段都是只读的。无论如何,为什么不将值初始化为0.0或编写自己的函数,在调用parseFloat之前检查值?使用该函数验证每个值是否为一个数字 如果不是,您只需不将其包括在计算中,或者将其设置为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
}
这里有一个它工作的例子
编辑可能将其短缩为一个函数:
function validateNumber(number)
{
return (!isNaN(number) && number!="") ? parseFloat(number) : 0
}
您可以尝试此操作,用户必须在添加之前输入值,如果您还可以提供默认值
函数计算最终值(frm)
{
var ele=frm.getElementsByTagName('input');
对于(var i=0;它的代码有一点作用。但问题是结果值显示为串联。例如,如果我输入50和50,答案是100。但它显示50+50。。函数calfinal(frm){var ele=frm.getElementsByTagName('input');var sum=0;for(var i=0;i)
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
}