javascript - 另一个输入中返回的两个输入字段的差异

Question

我想以最简单的方式计算两个输入的差异，并在第三个输入中返回它。

id="incomeSharedSum" - id="expendituresSharedSum" = id="disposalIncome"

这是我的表格:

<label for="%nameRoot%[income]">Total Income:€</label>
<input type="text" data-sumSource=".incomePart<?php echo $personOrder; ?>" name="%nameRoot%[income]" id="incomeSharedSum"/>

<label for="%nameRoot%[expenditures]">Total Expenditures: €</label>
<input type="text" data-sumSource=".expendituresPart<?php echo $personOrder; ?>" name="%nameRoot%[expenditures]" id="expendituresSharedSum"/>

<label for="%nameRoot%[disposalincome]">Monthly Disposal Income: €</label>
<input type="text"  name="%nameRoot%[disposalincome]" id="disposalIncome"/>

感谢您对这个非常基本的问题的帮助。谢谢。

==========编辑==========2016年1月21日

我有了一些进展，但现在不知道如何修改 js 来计算差值而不是总和:

<label for="%nameRoot%[income]">Total Income: €</label>
       <input onblur="updateDiff('#disposalIncome');" type="text" data-sumSource=".incomePart<?php echo $personOrder; ?>" name="%nameRoot%[income]" class="form-control disposalIncome" id="incomeSharedSum"/>
<label for="%nameRoot%[expenditures]">Total Expenditures: €</label>
       <input onblur="updateDiff('#disposalIncome');" type="text" data-sumSource=".expendituresPart<?php echo $personOrder; ?>" name="%nameRoot%[expenditures]" class="form-control calc disposalIncome" id="expendituresSharedSum"/>
<label for="%nameRoot%[disposalincome]" class="col-sm-4 field-label">Monthly Disposal Income: €</label>
       <input type="text" data-sumSource=".disposalIncome<?php echo $personOrder; ?>" name="%nameRoot%[disposalIncome]" class="form-control" id="disposalIncome"/>

并使用这段js代码:

function updateDiff(outputFieldSelector){
    var outputField = $(outputFieldSelector);
    var sum=0;
    $(outputField.attr('data-sumSource')).each(function(){
      sum+=Number($(this).val());
    });
      outputField.val(sum);

如何修改此行:

sum+=Number($(this).val());

要获得差异(在我的例子中是两个字段):总收入 - 总支出 = 可处置收入。

Answer 1

此函数将进行求和并将值放入第三个文本框中

function calculateSum()
{
   var incomeSharedSum= parseInt( document.getElementById( "incomeSharedSum" ).value );
   incomeSharedSum = isNaN( incomeSharedSum ) ? 0 : incomeSharedSum;
   var expendituresSharedSum = parseInt( document.getElementById( "expendituresSharedSum" ).value );
   expendituresSharedSum = isNaN( expendituresSharedSum ) ? 0 : expendituresSharedSum ;
   document.getElementById( "disposalIncome" ).value = incomeSharedSum + expendituresSharedSum;
}

您可以在哪个事件(例如前两个框之一的按钮单击或模糊事件)上调用此方法