Home/ Questions/Q 8832805
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T08:37:15+00:00

This is for a project in progress. I need to create a calculation that

  • 0

This is for a project in progress. I need to create a calculation that will grab the number from the ‘total’ row in the ‘off column’ in the table, then minus this from the starting balance that is defined in the input box. The result of this calculation then needs to be displayed in an alert box when the submit button is clicked.

It’s a bit beyond me and if anyone could point me in the right direction I would be grateful.

HTML:

<!DOCTYPE html>
<html>
<head>
   <h1><em>EXPENSES CALCULATOR</em></h1>
   <link rel="stylesheet" type="text/css" href="tt.css"/>
</head>
<body>
   <p id="balance">Starting balance (£)<input type="number"></p>
   <p>
      <input type="button" id="addNewRow" value="Add new row">
      <input type="button" onClick="window.print()" value="Print your purchases"/>
   </p>
   <table id="breakdowntable">
   <tr>
        <th>Payment type</th>
        <th>Off</th>
        <th>To come off</th>
        <th>Total</th>
   </tr>
   <tr id="card">
       <th>Card Payment</th>
       <td>0</td>
       <td>0</td>
       <td id="cardtotal">0</td>
   </tr>
   <tr id="cash">
       <th>Cash Payment</th>
       <td>0</td>
       <td>0</td>
       <td id="cashtotal">0</td>
   </tr>
   <tr id="other">
       <th>Other Payment</th>
       <td>0</td>
       <td>0</td>
       <td id="othertotal">0</td>
   </tr>
   <tr id="total">
       <th>Total</th>
       <td>0</td>
       <td>0</td>
       <td>0</td>
   </tr>
   </table>
   <table id="purchases"> </table>
   <p><input type="Submit" id="submit" onclick='alert(money_to_number())'> </p>
   <script type="text/javascript" src="tt.js"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">   </script>
</body>
</html>

JavaScript:

var doc = document;
function calculateAmount() {
var purchases = doc.getElementById('purchases');
var purchasesRows = purchases.rows;
var typeValue = {'CP' : [0,0], 'CA' : [0,0], 'OP' : [0,0]};
for (var i = 0, purchasesRowsLength = purchasesRows.length, pytType, inputs, isItOffInput, isItOff; i < purchasesRowsLength; ++i) {
    pytType = purchasesRows[i].getElementsByTagName('SELECT')[0];
    inputs = purchasesRows[i].getElementsByTagName('INPUT');
    isItOffInput = inputs[0];
    isItOff = inputs[inputs.length - 1].checked ? 0 : 1;
    typeValue[pytType.value][isItOff] += isItOffInput.value - 0;
}



var total = [0, 0];

var cardCells = doc.getElementById('card').cells;
cardCells[1].innerHTML = typeValue['CP'][0];
total[0] += typeValue['CP'][0];
cardCells[2].innerHTML = typeValue['CP'][1];
total[1] += typeValue['CP'][1];
cardCells[3].innerHTML = typeValue['CP'][0] + typeValue['CP'][1];

var cashCells = doc.getElementById('cash').cells;
cashCells[1].innerHTML = typeValue['CA'][0];
total[0] += typeValue['CA'][0];
cashCells[2].innerHTML = typeValue['CA'][1];
total[1] += typeValue['CA'][1];
cashCells[3].innerHTML = typeValue['CA'][0] + typeValue['CA'][1];

var otherCells = doc.getElementById('other').cells;
otherCells[1].innerHTML = typeValue['OP'][0];
total[0] += typeValue['OP'][0];
otherCells[2].innerHTML = typeValue['OP'][1];
total[1] += typeValue['OP'][1];
otherCells[3].innerHTML = typeValue['OP'][0] + typeValue['OP'][1];

var totalCells = doc.getElementById('total').cells;
totalCells[1].innerHTML = total[0];
totalCells[2].innerHTML = total[1];
totalCells[3].innerHTML = total[0] + total[1];
}

function addNewRow() {
var purchases = doc.getElementById('purchases');
var row = purchases.insertRow(purchases.rows.length);
var pytTypeCell = row.insertCell(0);
var type = [['CP', 'Paid by Card £'], ['CA', 'Paid with Cash £'], ['OP', 'Other Payment     type £']];
var pytType = doc.createElement('SELECT');
for (var i = 0, typeLength = type.length, option; i < typeLength; ++i) {
    option = doc.createElement('OPTION');
    option.value = type[i][0];
    option.innerHTML = type[i][1];
    pytType.appendChild(option);


}

pytType.onchange = calculateAmount;
var pytTypeLabel = doc.createElement('LABEL');
pytTypeLabel.innerHTML = 'Type';
pytTypeLabel.appendChild(pytType);
pytTypeCell.appendChild(pytTypeLabel);
var isItOffInput = doc.createElement('INPUT');
isItOffInput.type = 'number';
isItOffInput.onkeyup = calculateAmount;
pytTypeCell.appendChild(isItOffInput);

var descriptInputCell = row.insertCell(1);
var descriptInput = doc.createElement('INPUT');
descriptInput.type = 'number';
var descriptLabel = doc.createElement('LABEL');
descriptLabel.innerHTML = 'Description';
descriptLabel.appendChild(descriptInput);
descriptInputCell.appendChild(descriptLabel);

var dateInputCell = row.insertCell(2);
var dateInput = doc.createElement('INPUT');
dateInput.type = 'date';
var dateLabel = doc.createElement('LABEL');
dateLabel.innerHTML = 'Payment Date';
dateLabel.appendChild(dateInput);
dateInputCell.appendChild(dateLabel);

var isItOffCheckBoxCell = row.insertCell(3);
var isItOffCheckBox = doc.createElement('INPUT');
isItOffCheckBox.type = 'checkbox';
isItOffCheckBox.onclick = calculateAmount;
var isItOffLabel = doc.createElement('LABEL');
isItOffLabel.appendChild(isItOffCheckBox);
isItOffLabel.appendChild(document.createTextNode('Is it Off?'));
isItOffCheckBoxCell.appendChild(isItOffLabel);

}
doc.getElementById('addNewRow').onclick = addNewRow;
window.onload = function() {
addNewRow();
};

Here it is in a jsFiddle: http://jsfiddle.net/jfBAJ/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to give ids to the elements you want to find later. I gave your starting balance input the id “starting_balance” and I gave your grand total TD the id of “grand_total” then wrote the following onSubmit:

    document.getElementById("submit").onclick = onSubmit
function onSubmit(){
    var starting = document.getElementById("starting_balance").value;
    var grandTotal =  document.getElementById("grand_total").innerHTML;
    var finalBalance =parseFloat(grandTotal||0) + parseFloat(starting||0);
    alert(finalBalance);
}

    This alerts the new total + the starting balance.

    • 0