Subtract two values from populated fields - javascript

I have a table with some input fields a person will be filling in. It's for an application. I have a total for each set of tables. Right now those are summing up the totals from the fields into a total box for each table. I need an additional field to subtract those two fields to give me one broad total. For some reason I am getting no console errors or total outputted.
function findTotal() {
var arr = document.getElementsByClassName('qty');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('total_Assets').value = tot;
}
function findTotal2() {
var arr = document.getElementsByClassName('qty2');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('total_liabilities').value = tot;
}
function fnCalculate() {
//Get the texts from both textboxes
var txt1 = document.getElementById("total_Assets").value;
var txt2 = document.getElementById("total_liabilities").value;
//Substract that
var res = parseInt(txt1) - parseInt(txt2);
//Set the value to your div
document.getElementById("net_worth").innerHtml = res;
}
<table class="tg">
<tr>
<th class="tg-9hbo"><br></th>
<th class="tg-9hbo">Amount ($)<br></th>
</tr>
<tr>
<td class="tg-yw4l">Other Assets<br></td>
<td class="tg-yw4l"><input class="qty" onblur="findTotal()" id="other_assets" type="text" name="other_assets" value="[[+fi.other_assets]]" /></td>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"><input class="qty" onblur="findTotal()" id="other_assets_2" type="text" name="other_assets_2" value="[[+fi.other_assets_2]]" /></td>
</tr>
<tr>
<td class="tg-yw4l">(A) TOTAL ASSETS<br></td>
<td class="tg-yw4l"><input onblur="fnCalculate()" class="totals" id="total_Assets" type="text" name="total_Assets" value="[[+fi.total_Assets]]" readonly /></td>
</tr>
<tr>
<td class="tg-yw4l">(C) NET WORTH (A MINUS B)<br></td>
<td class="tg-yw4l"><input id="net_worth" type="text" name="net_worth" value="[[+fi.net_worth]]" readonly/></td>
</tr>
</table>
<table class="tg">
<tr>
<th class="tg-9hbo"><br></th>
<th class="tg-9hbo">Amount ($)<br></th>
</tr>
<tr>
<td class="tg-yw4l">Bank Loans<br></td>
<td class="tg-yw4l"><input class="qty2" onblur="findTotal2()" id="bank_loans" type="text" name="bank_loans" value="[[+fi.bank_loans]]" /></td>
</tr>
<tr>
<td class="tg-yw4l">Mortgages and Real Estate<br></td>
<td class="tg-yw4l"><input class="qty2" onblur="findTotal2()" id="mortgages" type="text" name="mortgages" value="[[+fi.mortgages]]" /></td>
</tr>
<tr>
<td class="tg-yw4l">(B) TOTAL LIABILITIES<br></td>
<td class="tg-yw4l"><input onblur="fnCalculate()" class="totals" id="total_liabilities" type="text" name="total_liabilities" value="[[+fi.total_liabilities]]" readonly /></td>
</tr>
</table>


I fixed two issues:
I have replaced the .innerHtml by the .value property
I call all the calculations each time an entry loses its focus. I think the calculations weren't correctly triggered
In addition to that, I replaced the use of the value attribute by placeholder to display the field name. That way you don't have to remove the text before entering anything.
function findTotal() {
var arr = document.getElementsByClassName('qty');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('total_Assets').value = tot;
}
function findTotal2() {
var arr = document.getElementsByClassName('qty2');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('total_liabilities').value = tot;
}
function fnCalculate() {
findTotal();
findTotal2();
//Get the texts from both textboxes
var txt1 = document.getElementById("total_Assets").value;
var txt2 = document.getElementById("total_liabilities").value;
//Substract that
var res = parseInt(txt1) - parseInt(txt2);
//Set the value to your div
document.getElementById("net_worth").value= res;
}
<table class="tg">
<tr>
<th class="tg-9hbo"><br></th>
<th class="tg-9hbo">Amount ($)<br></th>
</tr>
<tr>
<td class="tg-yw4l">Other Assets<br></td>
<td class="tg-yw4l"><input class="qty" onblur="fnCalculate()" id="other_assets" type="text" name="other_assets" placeholder="[[+fi.other_assets]]" /></td>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"><input class="qty" onblur="fnCalculate()" id="other_assets_2" type="text" name="other_assets_2" placeholder="[[+fi.other_assets_2]]" /></td>
</tr>
<tr>
<td class="tg-yw4l">(A) TOTAL ASSETS<br></td>
<td class="tg-yw4l"><input onblur="fnCalculate()" class="totals" id="total_Assets" type="text" name="total_Assets" placeholder="[[+fi.total_Assets]]" readonly /></td>
</tr>
<tr>
<td class="tg-yw4l">(C) NET WORTH (A MINUS B)<br></td>
<td class="tg-yw4l"><input id="net_worth" type="text" name="net_worth" placeholder="[[+fi.net_worth]]" readonly/></td>
</tr>
</table>
<table class="tg">
<tr>
<th class="tg-9hbo"><br></th>
<th class="tg-9hbo">Amount ($)<br></th>
</tr>
<tr>
<td class="tg-yw4l">Bank Loans<br></td>
<td class="tg-yw4l"><input class="qty2" onblur="fnCalculate()" id="bank_loans" type="text" name="bank_loans" placeholder="[[+fi.bank_loans]]" /></td>
</tr>
<tr>
<td class="tg-yw4l">Mortgages and Real Estate<br></td>
<td class="tg-yw4l"><input class="qty2" onblur="fnCalculate()" id="mortgages" type="text" name="mortgages" placeholder="[[+fi.mortgages]]" /></td>
</tr>
<tr>
<td class="tg-yw4l">(B) TOTAL LIABILITIES<br></td>
<td class="tg-yw4l"><input onblur="fnCalculate()" class="totals" id="total_liabilities" type="text" name="total_liabilities" placeholder="[[+fi.total_liabilities]]" readonly /></td>
</tr>
</table>

Related

How to Subtract the Max Value and Min Value from the Sum in an Array

My code has no problem adding up the values in the sum. The issue is subracting min value and max value from the overall sum that gets outputted in the empty div results. When the program is ran, it still adds up all values that were inputted. I have attempted it a few times and this is where I stopped.
<script>
function computeScore(){
let scores = [
judgeA = document.getElementById("judgeA").value,
judgeB = document.getElementById("judgeB").value,
judgeC = document.getElementById("judgeC").value,
judgeD = document.getElementById("judgeD").value,
judgeE = document.getElementById("judgeE").value,
judgeF = document.getElementById("judgeF").value,
judgeG = document.getElementById("judgeG").value,
judgeH = document.getElementById("judgeH").value
];
let min= Math.min(...scores);
let max= Math.min(...scores);
let sum=0;
let avg=0;
function calculateSum() {
for(let i = 0; i < scores.length; i++)
sum += Number(scores[i]);
console.log((sum-max)-min);
}
calculateSum();
document.getElementById("results").innerHTML = sum;
}
</script>
</head>
<body>
<h1>Olympic Judging Calculator </h1>
<form id=myForm>
<table>
<tr>
<td>Country A Judge:</td>
<td><input id="judgeA" type="number" value=""></td>
</tr>
<tr>
<td>Country B Judge:</td>
<td> <input id="judgeB" type="number" value=""></td>
</tr>
<tr>
<td>Country C Judge:</td>
<td><input id="judgeC" type="number" value=""></td>
</tr>
<tr>
<td>Country D Judge:</td>
<td> <input id="judgeD" type="number" value=""></td>
</tr>
<tr>
<td>Country E Judge:</td>
<td> <input id="judgeE" type="number" value=""></td>
</tr>
<tr>
<td>Country F Judge:</td>
<td> <input id="judgeF" type="number" value=""></td>
</tr>
<tr>
<td>Country G Judge:</td>
<td> <input id="judgeG" type="number" value=""></td>
</tr>
<tr>
<td>Country H Judge:</td>
<td> <input id="judgeH" type="number" value=""></td>
</tr>
</table>
</form>
<div id="results"></div>
<input type="button" value="Compute Score" onclick="computeScore()">
</body>

The problem is at let max= Math.min(...scores); line,
It should have been let max= Math.max(...scores);.
Since you are calculating wrong max value, your sum value is wrong.
Also, I think you forgot to subtract the min and max values from sum while setting it to the result.

Calculate total value using jquery

I have a table like below :
<table>
<th>Sl No</th>
<th>Quantity</th>
<th>Price</th>
<th>Discount %</th>
<th>Total Price</th>
<tr>
<td>1</td>
<td><input class="expensess" ></input></td>
<td><input class="expensess" ></input></td>
<td><input class="expensess" ></input></td>
<td><input class="expensess_sum"></input></td>
</tr>
<tr>
<td>2</td>
<td><input class="expensess" ></input></td>
<td><input class="expensess" ></input></td>
<td><input class="expensess" ></input></td>
<td><input class="expensess_sum"></input></td>
</tr>
</table>
Grand Total = <input id="grand_total">
I am trying to display the Total Price of each row using jquery keyup function.
and also want to display the grand total price of the each row.
the formula of finding the Total Price is given below :
discount_value = Price*(discount_percent/100)
discount_price = Price-discount_value
total_price = discount_price * quantity
How can I do this please help
i am trying simply just summing all value like this :
<script type="text/javascript">
$(document).ready(function(){
$(".expensess").each(function() {
$(document).on('keyup', '.expensess', function() {
sum($(this).parents("tr"));
});
});
});
function sum(parent){
var sum = 0;
$(parent).find(".expensess").each(function(){
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
$(parent).find(".expensess_sum").val(sum.toFixed(2));
}
</script>
But m confused how to implement the above formula for calculate the total price.

$('input.qty,input.price,input.discount').on('change keyup',function(){
var $tr = $(this).closest('tr'),
$qty = $tr.find('input.qty') ,
$price= $tr.find('input.price'),
$discount= $tr.find('input.discount'),
$total= $tr.find('input.expensess_sum'),
$grand_total=$('#grand_total');
$total.val($qty.val()*($price.val()-($price.val()*($discount.val()/100))));
var grandTotal=0;
$('table').find('input.expensess_sum').each(function(){
if(!isNaN($(this).val()))
{grandTotal += parseInt($(this).val());
}
});
if(isNaN(grandTotal))
grandTotal =0;
$grand_total.val(grandTotal)
})
input{
width:80px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table>
<tbody><tr>
<th>Sl No</th>
<th>Quantity</th>
<th>Price</th>
<th>Discount %</th>
<th>Total Price</th>
</tr>
<tr>
<td>1</td>
<td><input class="expensess qty"></td>
<td><input class="expensess price"></td>
<td><input class="expensess discount"></td>
<td><input class="expensess_sum" disabled=""></td>
</tr>
<tr>
<td>2</td>
<td><input class="expensess qty"></td>
<td><input class="expensess price"></td>
<td><input class="expensess discount"></td>
<td><input class="expensess_sum" disabled=""></td>
</tr>
</tbody></table>
Grand Total = <input id="grand_total" disabled="">
</body>

Did it by using simple java script Code!
var sumExpenses = 0;
var tdBudget = document.getElementById('tableBudget').getElementsByTagName('td');
for (var i = 0; i < tdBudget.length; i++) {
if (tdBudget[i].className == "spanexpense") {
sumExpenses += isNaN(tdBudget[i].innerHTML) ? 0 : parseInt(tdBudget[i].innerHTML);
}
}
document.getElementById('sumExpenses').innerHTML = sumExpenses;
<table class="table table-bordered">
<thead>
<tr>
<td class="label-title">Value</td>
<td class="label-title">Value</td>
<td class="label-title">Value</td>
</tr>
</thead>
<tbody id="tableBudget">
<tr>
<td class="spanexpense">
12
</td>
<td class="spanexpense">
23
</td>
<td class="spanexpense">
23
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td id="sumExpenses"></td>
</tr>
</tfoot>
</table>
Fiddle https://jsfiddle.net/ey2gLp7t/

Javascript- How do i get this script to display the calculated total?

I am aware of the other errors in this script but i do know how to fix those, the main problem is that i cannot figure out how to fix the calculated total function at the bottom of this script. I am fairly new to this however after checking several guides i could not find anything that would help.
<html>
<head>
</head>
<body>
<table>
<tr>
<td class="ColHdr">ID</td>
<td class="ColHdr">Product</td>
<td class="ColHdr">Price</td>
<td class="ColHdr">Discounted Price</td>
<td class="ColHdr">Quantity</td>
</tr>
<tr>
<td>1</td>
<td class="Product">Hat</td>
<td class="Price" id="Price01">19.99</td>
<td class="Price" id="DiscountedPrice01"></td>
<td><input id="Quantity01" type="number" value="0" onchange="CheckQuantity(this.value, this.id);"></td>
</tr>
<tr>
<td>2</td>
<td class="Product">Shirt</td>
<td class="Price" id="Price02">27.99</td>
<td class="Price" id="DiscountedPrice02"></td>
<td><input id="Quantity02" type="number" value="0" `enter code here`onchange="CheckQuantity(this.value, this.id);"></td>
</tr>
<tr>
<td>3</td>
<td class="Product">Jersey</td>
<td class="Price" id="Price03">109.99</td>
<td class="Price" id="DiscountedPrice03"></td>
<td><input id="Quantity03" type="number" value="0" onchange="CheckQuantity(this.value, this.id);"></td>
</tr>
<tr>
<td>4</td>
<td class="Product">Socks</td>
<td class="Price" id="Price04">4.49</td>
<td class="Price" id="DiscountedPrice04"></td>
<td><input id="Quantity04" type="number" value="0" onchange="CheckQuantity(this.value, this.id);"></td>
</tr>
<tr>
<td>5</td>
<td class="Product">Sweatshirt</td>
<td class="Price" id="Price05">39.79</td>
<td class="Price" id="DiscountedPrice05"></td>
<td><input id="Quantity05" type="number" value="0" onchange="CheckQuantity(this.value, this.id);"></td>
</tr>
<tr>
<td>6</td>
<td class="Product">Bumper Sticker</td>
<td class="Price" id="Price06">3.29</td>
<td class="Price" id="DiscountedPrice06"></td>
<td><input id="Quantity06" type="number" value="0" onchange="CheckQuantity(this.value, this.id);"></td>
</tr>
<tr>
<td>7</td>
<td class="Product">Jacket</td>
<td class="Price" id="Price07">179.99</td>
<td class="Price" id="DiscountedPrice07"></td>
<td><input id="Quantity07" type="number" value="0" onchange="CheckQuantity(this.value, this.id);"></td>
</tr>
<tr>
<td>8</td>
<td class="Product">Sun Glasses</td>
<td class="Price" id="Price08">12.99</td>
<td class="Price" id="DiscountedPrice08"></td>
<td><input id="Quantity08" type="number" value="0" onchange="CheckQuantity(this.value, this.id);"></td>
</tr>
<tr>
<td>9</td>
<td class="Product">Poster</td>
<td class="Price" id="Price09">8.99</td>
<td class="Price" id="DiscountedPrice09"></td>
<td><input id="Quantity09" type="number" value="0" onchange="CheckQuantity(this.value, this.id);"></td>
</tr>
<tr>
<td>10</td>
<td class="Product">Banner</td>
<td class="Price" id="Price10">5.49</td>
<td class="Price" id="DiscountedPrice10"></td>
<td><input id="Quantity10" type="number" value="0" onchange="CheckQuantity(this.value, this.id);"></td>
</tr>
<tr>
<td>11</td>
<td class="Product">Ski Hat</td>
<td class="Price" id="Price11">15.09</td>
<td class="Price" id="DiscountedPrice11"></td>
<td><input id="Quantity11" type="number" value="0" onchange="CheckQuantity(this.value, this.id);"></td>
</tr>
<tr>
<td>12</td>
<td class="Product">Tee Shirt</td>
<td class="Price" id="Price12">14.99</td>
<td class="Price" id="DiscountedPrice12"></td>
<td><input id="Quantity12" type="number" value="0" onchange="CheckQuantity(this.value, this.id);"></td>
</tr>
<tr>
<td>13</td>
<td class="Product">Tank Top</td>
<td class="Price" id="Price13">9.99</td>
<td class="Price" id="DiscountedPrice13"></td>
<td><input id="Quantity13" type="number" value="0" onchange="CheckQuantity(this.value, this.id);"></td>
</tr>
<tr>
<td>14</td>
<td class="Product">Pin</td>
<td class="Price" id="Price14">1.79</td>
<td class="Price" id="DiscountedPrice14"></td>
<td><input id="Quantity14" type="number" value="0" onchange="CheckQuantity(this.value, this.id);"></td>
</tr>
<tr>
<td>15</td>
<td class="Product">Framed Photo</td>
<td class="Price" id="Price15">49.99</td>
<td class="Price" id="DiscountedPrice15"></td>
<td><input id="Quantity15" type="number" value="0" onchange="CheckQuantity(this.value, this.id);"></td>
</tr>
<tr>
<td>16</td>
<td class="Product">Team License Plate</td>
<td class="Price" id="Price16">17.99</td>
<td class="Price" id="DiscountedPrice16"></td>
<td><input id="Quantity16" type="number" value="0" onchange="CheckQuantity(this.value, this.id);"></td>
</tr>
<tr>
<td>17</td>
<td class="Product">Team Pen</td>
<td class="Price" id="Price17">3.99</td>
<td class="Price" id="DiscountedPrice17"></td>
<td><input id="Quantity17" type="number" value="0" onchange="CheckQuantity(this.value, this.id);"></td>
</tr>
<tr>
<td>18</td>
<td class="Product">Decorative Baseball</td>
<td class="Price" id="Price18">11.99</td>
<td class="Price" id="DiscountedPrice18"></td>
<td><input id="Quantity18" type="number" value="0" onchange="CheckQuantity(this.value, this.id);"></td>
</tr>
<tr>
<td>19</td>
<td class="Product">Decorative Football</td>
<td class="Price" id="Price19">29.99</td>
<td class="Price" id="DiscountedPrice19"></td>
<td><input id="Quantity19" type="number" value="0" onchange="CheckQuantity(this.value, this.id);"></td>
</tr>
<tr>
<td>20</td>
<td class="Product">Decorative Basketball</td>
<td class="Price" id="Price20">24.99</td>
<td class="Price" id="DiscountedPrice20"></td>
<td><input id="Quantity20" type="number" value="0" onchange="CheckQuantity(this.value, this.id);"></td>
</tr>
<tr>
<td>21</td>
<td class="Product">Window Decal</td>
<td class="Price" id="Price21">5.99</td>
<td class="Price" id="DiscountedPrice21"></td>
<td><input id="Quantity21" type="number" value="0" onchange="CheckQuantity(this.value, this.id);"></td>
</tr>
<tr>
<td>22</td>
<td class="Product">Window Decal (Team Set)</td>
<td class="Price" id="Price22">19.99</td>
<td class="Price" id="DiscountedPrice22"></td>
<td><input id="Quantity22" type="number" value="0" onchange="CheckQuantity(this.value, this.id);"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td><br><input type="button" id="CalculateTotal" value="Calculate Total" onclick="CalculcateTotal();"></td>
<td></td>
<td id="TotalLabel"><br>Total:</td>
<td id="Total"><br></td>
</tr>
</table>
<br>
<p>
Plan:
<input type="radio" value="1" name="Plan" checked="checked" onclick="CalcDiscountedPrice(this.value, this.id);">Standard
<input type="radio" value=".95" name="Plan" onclick="CalcDiscountedPrice(this.value, this.id);">Silver
<input type="radio" value=".85" name="Plan" onclick="CalcDiscountedPrice(this.value, this.id);">Gold
</p>
<img src="AcmeLogo.jpg" onload="CalcDiscountedPrice(1);">
<body>
<script type="text/javascript" >
function CalcDiscountedPrice(PercentToPay) {
var i = 1;
for (i = 1; i <= 22; i++) {
if (i < 10) {
var CellNumber = "0" + i;
} else {
var CellNumber = i;
}
var DiscountedCellId = "DiscountedPrice" + CellNumber;
var DiscountedCell = document.getElementById(DiscountedCellId);
var PriceCellId = "Price" + CellNumber;
var PriceCell = document.getElementById(PriceCellId);
var Price = Number(PriceCell.innerHTML);
var DiscountedPrice = Math.round((Price * PercentToPay) * 100)/100;
DiscountedCell.innerHTML = DiscountedPrice;
DiscountedCell.style.color = "#ee0c00";
DiscountedCell.style.fontWeight = "bold";
DiscountedCell.style.fontStyle = "italic";
}
}
function CalculateTotal() {
var total= O;
var i = 1;
for (var i = 1; b <= 22; i++) {
if (i < 10) {
var CellNumber = "0" + i;
} else {
var CellNumber = i;
}
var DiscountedCellId = "DiscountedPrice" + CellNumber;
var DiscountedCell = document.getElementById(DiscountedCellId);
}
}
</script>
</html>

Amended below is your javascript. Note, I have uncapitalised all your variables as that is bad practice.
function CalcDiscountedPrice(percentToPay) {
var i = 1;
for (i = 1; i <= 22; i++) {
if (i < 10) {
var cellNumber = "0" + i;
} else {
var cellNumber = i;
}
var discountedCellId = "DiscountedPrice" + cellNumber;
var discountedCell = document.getElementById(discountedCellId);
var priceCellId = "Price" + cellNumber;
var priceCell = document.getElementById(priceCellId);
var price = Number(priceCell.innerHTML);
var discountedPrice = Math.round((price * percentToPay) * 100)/100;
discountedCell.innerHTML = discountedPrice;
discountedCell.style.color = "#ee0c00";
discountedCell.style.fontWeight = "bold";
discountedCell.style.fontStyle = "italic";
}
CalculateTotal();
}
function CalculateTotal() {
var total= 0;
var i = 1;
for (var i = 1; i <= 22; i++) {
if (i < 10) {
var cellNumber = "0" + i;
} else {
var cellNumber = i;
}
var discountedCellId = "DiscountedPrice" + cellNumber;
var discountedCellPrice = document.getElementById(discountedCellId).innerHTML;
var price = discountedCellPrice;
if(discountedCellPrice === "") { // check if a discount is applied, use normal price if not
var normalCellId = "Price" + cellNumber;
price = document.getElementById(normalCellId).innerHTML;
}
var quantityCellId = "Quantity" + cellNumber;
total += price * document.getElementById(quantityCellId).value;
}
document.getElementById("Total").innerHTML = total;
}
And as #RamblinRose pointed out, you haven't called CalculateTotal correctly

You have a typo, you're calling
onclick="CalculcateTotal();"
but your function is
function CalculateTotal() {
Change your onclick to
onclick="CalculateTotal();"
Try F-12. There's a debugger in that browser.

Get sum of a column in a table

Suppose i have the table below and i want to add the column Credits to get its sum
<table id="tbl_semester11">
<thead>
<tr>
<th>Semester 1</th>
</tr>
</thead>
<thead>
<tr>
<th>Module Code</th>
<th>Module Name</th>
<th>Credits</th>
<th>Module %</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>MGMT1101C</td>
<td>Management Seminar</td>
<td id="txtcredit112" class="sum">3</td>
<td><input type="number" id="txtpercentage112" min="40" max="100" onchange="process([1,1,2,5]);"></td>
<td id="txtgrade112">D</td>
</tr>
<tr class="alt">
<td>HCA1105C</td>
<td>Computer Architecture</td>
<td id="txtcredit113" class="sum">4</td>
<td><input type="number" id="txtpercentage113" min="40" max="100" onchange="process([1,1,3,5]);"></td>
<td id="txtgrade113">D</td>
</tr>
<tr>
<td>PROG1115C</td>
<td>Object Oriented Software Development I</td>
<td id="txtcredit114" class="sum">4</td>
<td><input type="number" id="txtpercentage114" min="40" max="100" onchange="process([1,1,4,5]);"></td>
<td id="txtgrade114">D</td>
</tr>
<tr class="alt">
<td>MATH1103C</td>
<td>Decision Mathematics</td>
<td id="txtcredit115" class="sum">3</td>
<td><input type="number" id="txtpercentage115" min="40" max="100" onchange="process([1,1,5,5]);"></td>
<td id="txtgrade115">D</td>
</tr>
<tr>
<td>ITE1107C</td>
<td>Language and Communication Seminar</td>
<td id="txtcredit116" class="sum">3</td>
<td><input type="number" id="txtpercentage116" min="40" max="100" onchange="process([1,1,6,5]);"></td>
<td id="txtgrade116">D</td>
</tr>
<tr class="al">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td bgcolor="#b3ffb3"><b>S.P.A</b></td>
<td bgcolor="#4dff4d" id="spa11">40.7</td>
</tr>
</tbody>
</table>
Here is my JS
function getsum(arr) {
var sum = 0;
var tbl_id = 'tbl_semester' + arr[0] + arr[1];
$('#' + tbl_id + '.sum').each(function () {
sum += +(this).text()||0;
});
return sum;
arr is the same parameter as process i.e [1,1,3,5].The problem is that sum always returns 0

Your selector is wrong. If you want to select children with the .sum class, you should add a space between parent and children. Your function should be:
function getsum(arr) {
var sum = 0;
var tbl_id = 'tbl_semester' + arr[0] + arr[1];
$('#' + tbl_id + ' .sum').each(function () {
sum += parseInt($(this).text())||0;
});
return sum;
}
Also, I used parseInt() because .text() returns a string. That way you are sure to have a NaN value or an actual integer.

How to sum Jquery Outputs

I created couple of rows and multiplied some data to get totals:
But I am not sure how to sum all the totals and print it in "Cash in Hand" row.
Following are my codes:
<script type="text/javascript">
$(document).ready(function() {
$('.row1').keyup(function(ev){
var row1c = $(this).val() * 1000;
$('.row1c').html((row1c).toFixed(2));
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.row2').keyup(function(ev){
var row2c = $(this).val() * 500;
$('.row2c').html((row2c).toFixed(2));
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.row3').keyup(function(ev){
var row3c = $(this).val() * 100;
$('.row3c').html((row3c).toFixed(2));
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.row4').keyup(function(ev){
var row4c = $(this).val() * 50;
$('.row4c').html((row4c).toFixed(2));
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('.row5').keyup(function(ev){
var row5c = (row1c+row2c+row3c+row4c);
$('.row5c').html((row5c).toFixed(2));
});
});
</script>
<table border="2" cellpadding="5" cellspacing="2" align="center">
<h3 align="center">Cash Position as on...... </h3>
<tr>
<th>Note</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr>
<td>1000 Tk Note</td>
<td><input type="text" name="pages" class="row1" /></td>
<td><span class="row1c">0.00</span></td>
</tr>
<tr>
<td>500 Tk Note</td>
<td><input type="text" name="pages" class="row2" /></td>
<td><span class="row2c">0.00</span></td>
</tr>
<tr>
<td>100 Tk Note</td>
<td><input type="text" name="pages" class="row3" /></td>
<td><span class="row3c">0.00</span></td>
</tr>
<tr>
<td>50 Tk Note</td>
<td><input type="text" name="pages" class="row4" /></td>
<td><span class="row4c">0.00</span></td>
</tr>
<tr>
<td colspan ="2">Cash In Hand (Sum of All Totals)</td>
<td><span class="row5c">0.00</span></td>
</tr>
</table>
All codes together here:
https://jsfiddle.net/rashelmiah/fb9opo36/1/
Could you please me find a way to sum all the totals?
Thanks in advance.

You need add the following code.
$('input[type=text]').keyup(function(){
var total = 0;
$('input[type=text]').each(function(){
total += Number($(this).parent().next().find('span').text());
})
$('.row5c').text(total);
})
Note: Your code had a lot of <script> tags which was unnecessary. And a lot of ready() function, which was unnecessary too. You can wrap the whole code inside one <script> tag and one ready() function.
Demo:
$(document).ready(function() {
$('.row1').keyup(function(ev){
var row1c = $(this).val() * 1000;
$('.row1c').html((row1c).toFixed(2));
});
$('.row2').keyup(function(ev){
var row2c = $(this).val() * 500;
$('.row2c').html((row2c).toFixed(2));
});
$('.row3').keyup(function(ev){
var row3c = $(this).val() * 100;
$('.row3c').html((row3c).toFixed(2));
});
$('.row4').keyup(function(ev){
var row4c = $(this).val() * 50;
$('.row4c').html((row4c).toFixed(2));
});
$('.row5').keyup(function(ev){
var row5c = (row1c+row2c+row3c+row4c);
$('.row5c').html((row5c).toFixed(2));
});
$('input[type=text]').keyup(function(){
var total = 0;
$('input[type=text]').each(function(){
total += Number($(this).parent().next().find('span').text());
})
$('.row5c').text(total.toFixed(2));
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="2" cellpadding="5" cellspacing="2" align="center">
<h3 align="center">Cash Position as on...... </h3>
<tr>
<th>Note</th>
<th>Quantity</th>
<th>Total</th>
</tr>
<tr>
<td>1000 Tk Note</td>
<td>
<input type="text" name="pages" class="row1" />
</td>
<td><span class="row1c">0.00</span>
</td>
</tr>
<tr>
<td>500 Tk Note</td>
<td>
<input type="text" name="pages" class="row2" />
</td>
<td><span class="row2c">0.00</span>
</td>
</tr>
<tr>
<td>100 Tk Note</td>
<td>
<input type="text" name="pages" class="row3" />
</td>
<td><span class="row3c">0.00</span>
</td>
</tr>
<tr>
<td>50 Tk Note</td>
<td>
<input type="text" name="pages" class="row4" />
</td>
<td><span class="row4c">0.00</span>
</td>
</tr>
<tr>
<td colspan="2">Cash In Hand (Sum of All Totals)</td>
<td><span class="row5c">0.00</span>
</td>
</tr>
</table>

Categories