在另一個輸入中返回的兩個輸入文件差異

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"/> 

欣賞這個很基本的問題，你的幫助。謝謝。

========== ==========編輯21/01/2016

我有一些進步，但不知道現在該怎麼modyfi 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); 

如何modyfi這一行：

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; 
} 

，你可以調用這個方法是哪個事件（如前兩個盒子中的一個按鈕，點擊或模糊事件）

Answer 2

對於兩個輸入字段中的每一個，基本上都使用.value，執行減法並將值設置爲第三個輸入字段的.value。檢查這個JS Fiddle - updated 2

var inputs = document.getElementsByClassName('calc'), 
 
    income = document.getElementById('incomeSharedSum'), 
 
    expenditures = document.getElementById('expendituresSharedSum'), 
 
    gTotal = document.getElementById('gTotal'); 
 

 
for (var i in inputs) { 
 
    this.addEventListener('change', function() { 
 
    gTotal.value = +income.value - +expenditures.value; 
 
    }); 
 
}

<label for="incomeSharedSum">Total Income:€</label> 
 
<input type="text" id="incomeSharedSum" class="calc" /> 
 
<br> 
 
<label for="xpendituresSharedSum" class="col-sm-4 field-label">Total Expenditures: €</label> 
 
<input type="text" id="expendituresSharedSum" class="calc" /> 
 
<hr> 
 
<label for="gTotal" class="col-sm-4 field-label">final: €</label> 
 
<input type="text" id="gTotal" />

---

如果你想添加的部分，改變成這個

：

gTotal.value = (+income.value - +expenditures.value).toFixed(2); 

其中2是怎樣的期後的數位，如果0它會輸出整數。

JS Fiddle 2