我正在尝试根据表单输入制作一个实时计算器,当我使用一个示例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
});
答案 0 :(得分:5)
你一直在混淆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;