基于表单输入的实时Javascript计算

时间:2017-03-11 02:32:27

标签: javascript jquery html keyup

我正在尝试根据表单输入制作一个实时计算器,当我使用一个示例div它可以工作,但当我尝试在输入中打印总数时,我似乎遗漏了一些东西......

工作加价解决方案:

 <input id='first' type="text" class="form-control formBlock" name="bus_ticket"  placeholder="Bus Ticket..." required/><br />

<input id='second' type="text" class="form-control formBlock" name="plane_ticket"  placeholder="Plane Ticket..." required/><br />

<input id='third' type="text" class="form-control formBlock" name="hotel_expenses"  placeholder="Hotel Expenses..." required/><br />

 <input id='fourth' type="text" class="form-control formBlock" name="eating_expenses"  placeholder="Eating Expenses..." required/><br />

Total : <span id="total_expenses"></span>

工作脚本

$('input').keyup(function(){ // run anytime the value changes


    var firstValue = parseFloat($('#first').val()); // get value of field
    var secondValue = parseFloat($('#second').val()); // convert it to a float
    var thirdValue = parseFloat($('#third').val());
    var fourthValue = parseFloat($('#fourth').val());

    $('#total_expenses').html(firstValue + secondValue + thirdValue + fourthValue); // add them and output it
});

非工作加价

<input id='total_expenses' type="text" class="form-control formBlock" name="funding"  placeholder="Total Expenses..."/>

非工作脚本

$('input').keyup(function(){ // run anytime the value changes
    var firstValue = parseFloat($('#first').val()); // get value of field
    var secondValue = parseFloat($('#second').val()); // convert it to a float
    var thirdValue = parseFloat($('#third').val());
    var fourthValue = parseFloat($('#fourth').val());
    document.getElementById('#total_expenses').value(firstValue + secondValue + thirdValue + fourthValue);
// add them and output it
});

3 个答案:

答案 0 :(得分:5)

<强>

Here's a working JSFiddle.

你一直在混淆Javascript和jQuery代码。

// Wrong code:
document.getElementById('#total_expenses').value(sum)
//Correct code:
document.getElementById('total_expenses').value() = sum

另外,将parseFloat更改为Number,这样当至少有一个输入字段为空时,您就不会获得NaN

奖励:将您的<input type="text" />更改为<input type="number" />,以防止“非数字”输入。

答案 1 :(得分:1)

你可以尝试这个jquery代码

var totalValue = firstValue + secondValue + thirdValue + fourthValue;
$('#total_expenses').val(totalValue);

答案 2 :(得分:1)

首先,使用getElementById时可以省略#。其次,使用vanilla JS为输入赋值是通过简单赋值完成的,而不是函数调用。所以该行应如下所示:

document.getElementById('total_expenses').value = firstValue + secondValue + thirdValue + fourthValue;