Javascript math show decimal places - javascript

I almost have this working however the script is rounding my numbers while I wish to keep both decimals places for a full price instead of being automatically rounded up. My sandbox for this script is here:
http://www.zacharydesigns.com/sandbox/calculatorJS2.html
and here is the code:
<script type="text/javascript">
function update1() {
var a = +document.forms['calc'].elements['productOne'].value,
b = +document.forms['calc'].elements['productTwo'].value,
c = +document.forms['calc'].elements['productThree'].value,
productTotal = Math.floor(a/(a+b+c)*399.99);
document.forms['calc'].elements['productTotal1'].value = productTotal;
return false;
}
function update2() {
var a = +document.forms['calc'].elements['productOne'].value,
b = +document.forms['calc'].elements['productTwo'].value,
c = +document.forms['calc'].elements['productThree'].value,
productTotal = Math.floor(b/(a+b+c)*399.99);
document.forms['calc'].elements['productTotal2'].value = productTotal;
return false;
}
function update3() {
var a = +document.forms['calc'].elements['productOne'].value,
b = +document.forms['calc'].elements['productTwo'].value,
c = +document.forms['calc'].elements['productThree'].value,
productTotal = Math.floor(c/(a+b+c)*399.99);
document.forms['calc'].elements['productTotal3'].value = productTotal;
return false;
}
</script>
<form name="calc" action="#">
<table align="center"
border="1"><tr><td align="right">Boots: </td>
<td align="left"><input type="text" name="productOne" size="5" />
</td>
<td colspan="2" align="center">
<input type="button" value="Calculate"
onclick="update1();" /> </td>
<td align="right">Product Total:</td><td align="left">
<input type="text" name="productTotal1" size="6"
readonly="readonly" /></td>
</tr>
<tr>
<td align="right">Bindings: </td>
<td align="left"><input type="text" name="productTwo" size="5" />
</td>
<td colspan="2" align="center">
<input type="button" value="Calculate"
onclick="update2();" /> </td>
<td align="right">Product Total:</td><td align="left">
<input type="text" name="productTotal2" size="6"
readonly="readonly" /></td>
</tr><tr>
<td align="right">Boards: </td>
<td align="left"><input type="text" name="productThree" size="5" />
</td>
<td colspan="2" align="center">
<input type="button" value="Calculate"
onclick="update3();" /> </td>
<td align="right">Product Total:</td><td align="left">
<input type="text" name="productTotal3" size="6"
readonly="readonly" /></td>
</tr><tr></tr>
</tr>
</table></form>
Can someone please tell me how I can have math operated on the full number without rounding it?

I think that the issue is that you are using the floor operator. The floor operator always rounds down to the nearest integer so:
floor(3.5) == 3
floor(5.9999999999999999999999999999) = 5
floor(5) = 5
And I think you get the drift. That you want to do is format the decimal places and the toFixed() function is for that.
So basically, change these lines:
productTotal = Math.floor(c/(a+b+c)*399.99);
To:
productTotal = (c/(a+b+c)*399.99).toFixed(2);
And I think that will be what you want.

Related

Using Javascript to set input to readonly

I'm trying to use Javascript to set input fields to readonly, if they do not contain any value, i.e if they are null. this is my code, I'm not receiving any errors from the debugger, but it simply refuses to work, could someone
//checkScore();
function checkScore(){
document.getElementById('score_row1').readonly = true;
var scores = document.getElementsByClassName("score_holder");
var i;
for(i=0; i<scores.length; i++){
if(scores[i].value!=null){
scores[i].readonly="readonly";
}
}
}
<!doctype html>
<html>
<head>
</head>
<body onload="checkScore()">
<table align="center" cellpadding="3">
<tr valign="baseline">
<td colspan="3" align="center" id="course_row25" value="EDU-101"><strong>EDUCATION COURSES</strong></td>
</tr>
<tr>
<td align="right">
<input name="course_row1" type="text" id="course_row1" title="EDU-101: Historical Foundation of Education" value="EDU-101" size="5" readonly="readonly" />
</td>
<td> </td>
<td>
<input type="text" value="30" size="5" class="score_holder" />
</td>
</tr>
<tr>
<td align="right" id="course_row1" name="course_row1" value="EDU-101">
<input name="course_row1" type="text" id="course_row1" title="EDU-101: Historical Foundation of Education" value="EDU-101" size="5" readonly="readonly" />
</td>
<td> </td>
<td>
<input type="text" size="5" class="score_holder" />
</td>
</tr>
<tr>
<td align="right" id="course_row1" name="course_row1" value="EDU-101">
<input name="course_row1" type="text" id="course_row1" title="EDU-101: Historical Foundation of Education" value="EDU-101" size="5" readonly="readonly" />
</td>
<td> </td>
<td>
<input type="text" value="10" size="5" class="score_holder" />
</td>
</tr>
</table>
</body>
</html>
First, there is no element with the id score_row1 in your HTML, so your js will throw an error and fail.
Also the property is readOnly and not readonly
So this scores[i].readonly="readonly"; should be scores[i].readOnly="readonly";
Created a working demo here
The value of a text input will always be a string.
If nothing has been typed in it, then the value will be "". It will never be null.

Do arithmetic calculations on Table elements

Hello and thank you in advance.
I have a table where some values prefilled (like 111.36) but when I try to do math with the numbers, or even display the number nothing happens.
Thank you for your assistance,
Marc (new at Javascript)
function calculate_it() {
window.alert("In function calculate_it");
var x = document.getElementByID("Numb01").value;
window.alert(x);
} //end function
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<TITLE>Javascript Table</TITLE>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<h3>A demonstration of calculators</h3>
<table id="t01">
<caption>Chek this out!</caption>
<tr>
<th>Date</th>
<th>Number 1</th>
<th>Number 2</th>
<th>Number 3</th>
<th>Number 4</th>
</tr>
<tr>
<td>
<input type="text" id="Date01" value="WED21DEC16" size="10" />
</td>
<td>
<input type="number" id="Numb01" value=111.36 size="5" />
</td>
<td>
<input type="number" id="Numb02" value=222.36 size="5" />
</td>
<td>
<input type="number" id="Numb03" value=333.36 size="5" />
</td>
<td>
<input type="number" id="Numb04" value=444.36 size="5" />
</td>
</tr>
<tr>
<td>
<input type="text" id="Date02" value="WED22DEC16" size="10" />
</td>
<td>
<input type="number" id="Numb05" value=555.36 size="5" />
</td>
<td>
<input type="number" id="Numb06" value=666.36 size="5" />
</td>
<td>
<input type="number" id="Numb07" value=777.36 size="5" />
</td>
<td>
<input type="number" id="Numb08" value=888.36 size="5" />
</td>
</tr>
<TR>
<td height="20" ColSpan="5"></td>
</TR>
<TR>
<td height="20" ColSpan="2"></td>
<td ColSpan="2" class='alnright'>Multiply:</td>
<td>
<input type="text" id="ActionMulti" value="" size="5" />
</td>
</TR>
<TR>
<td height="20" ColSpan="2"></td>
<td ColSpan="2" class='alnright'>Add:</td>
<td>
<input type="text" id="ActionAdd" value="" size="5" />
</td>
</TR>
<TR>
<td height="20" ColSpan="2"></td>
<td ColSpan="2" class='alnright'>Percentage:</td>
<td>
<input type="text" id="ActionPercentage" value="" size="5" />
</td>
</TR>
<TR>
<td height="20" ColSpan="2"></td>
<td ColSpan="2" class='alnright'>----------</td>
<td>--------</td>
</TR>
<TR>
<td height="20" ColSpan="2"></td>
<td ColSpan="2" class='alnright'>Sum:</td>
<td>
<input type="text" id="Sum" value="" size="5" />
</td>
</TR>
</table>
<br>
<p>Click the button to calculate the data</p>
<button type="button" onclick="calculate_it()">calculate_it</button>
</body>
</html>
Well, I guess you already read all the comments saying the same: It's getElementById not getElementByID. Remember, JavaScript is case sensitive.
What you need to do for run your code successfuly are simple 2 things:
Store all input (number) values in an array.
Use a reduce function to get easy the result for the multiply, sum and percentage.
For example:
function calculate_it() {
var inputs = document.querySelectorAll('input[type="number"]');
var multiply = 0;
var add = 0;
var percentage = 0;
// get the values of each input, map then and return
// a new array with the parsed numbers
var numbers = [].map.call(inputs, function (i) {
return parseFloat(i.value);
});
multiply = numbers.reduce(function (n1, n2) {
return n1 * n2;
});
add = numbers.reduce(function (n1, n2) {
return n1 + n2;
});
percentage = numbers.reduce(function (n1, n2) {
return (n1 / n2) * 100;
});
document.getElementById('ActionMulti').value = multiply.toFixed(2);
document.getElementById('ActionAdd').value = add.toFixed(2);
document.getElementById('ActionPercentage').value = percentage.toFixed(2);
document.getElementById('Sum').value = (multiply + add + percentage).toFixed(2);
}
The toFixed of Number class returns an string representation of the number with the maximum numner of decimals passed as argument. It method round (classic round) the number if is necessary.
Full example
function calculate_it() {
var inputs = document.querySelectorAll('input[type="number"]');
var multiply = 0;
var add = 0;
var percentage = 0;
// get the values of each input, map then and return
// a new array with the parsed numbers
var numbers = [].map.call(inputs, function (i) {
return parseFloat(i.value);
});
multiply = numbers.reduce(function (n1, n2) {
return n1 * n2;
});
add = numbers.reduce(function (n1, n2) {
return n1 + n2;
});
percentage = numbers.reduce(function (n1, n2) {
return (n1 * n2) / 100;
});
document.getElementById('ActionMulti').value = multiply.toFixed(2);
document.getElementById('ActionAdd').value = add.toFixed(2);
document.getElementById('ActionPercentage').value = percentage.toFixed(8);
document.getElementById('Sum').value = (multiply + add + percentage).toFixed(2);
}
input {
width: 100%;
}
<h3>A demonstration of calculators</h3>
<table id="t01">
<caption>Chek this out!</caption>
<tr>
<th>Date</th>
<th>Number 1</th>
<th>Number 2</th>
<th>Number 3</th>
<th>Number 4</th>
</tr>
<tr>
<td>
<input type="text" id="Date01" value="WED21DEC16" size="10" />
</td>
<td>
<input type="number" id="Numb01" value=11.36 size="5" />
</td>
<td>
<input type="number" id="Numb02" value=12.36 size="5" />
</td>
<td>
<input type="number" id="Numb03" value=7.36 size="5" />
</td>
<td>
<input type="number" id="Numb04" value=4.36 size="5" />
</td>
</tr>
<tr>
<td>
<input type="text" id="Date02" value="WED22DEC16" size="10" />
</td>
<td>
<input type="number" id="Numb05" value=8.36 size="5" />
</td>
<td>
<input type="number" id="Numb06" value=6.36 size="5" />
</td>
<td>
<input type="number" id="Numb07" value=10.36 size="5" />
</td>
<td>
<input type="number" id="Numb08" value=8.36 size="5" />
</td>
</tr>
<TR>
<td height="20" ColSpan="5"></td>
</TR>
<TR>
<td height="20" ColSpan="2"></td>
<td ColSpan="2" class='alnright'>Multiply:</td>
<td>
<input type="text" id="ActionMulti" value="" size="5" />
</td>
</TR>
<TR>
<td height="20" ColSpan="2"></td>
<td ColSpan="2" class='alnright'>Add:</td>
<td>
<input type="text" id="ActionAdd" value="" size="5" />
</td>
</TR>
<TR>
<td height="20" ColSpan="2"></td>
<td ColSpan="2" class='alnright'>Percentage:</td>
<td>
<input type="text" id="ActionPercentage" value="" size="5" />
</td>
</TR>
<TR>
<td height="20" ColSpan="2"></td>
<td ColSpan="2" class='alnright'>----------</td>
<td>--------</td>
</TR>
<TR>
<td height="20" ColSpan="2"></td>
<td ColSpan="2" class='alnright'>Sum:</td>
<td>
<input type="text" id="Sum" value="" size="5" />
</td>
</TR>
</table>
<br>
<p>Click the button to calculate the data</p>
<button type="button" onclick="calculate_it()">calculate_it</button>

How do I change a calculation based on a drop down box?

Disclaimer for possible question ignorance - I am super super green at coding Javascript and I'm looking for some friendly advice.
I am looking to code a very basic calculator for a website. This calculator works out a very simple calculation for heat output requirements for a room based on size. But I want the calculation to alter slightly based on a user selected drop down option, namely if the user wants to input in meters or feet.
Code is (currently) as follows:
function Calculate() {
var a = document.getElementById("height").value;
var b = document.getElementById("width").value;
var c = document.getElementById("depth").value;
var d = +a * +b * +c / 14;
var x = d.toFixed(2);
document.getElementById("result").innerHTML = x;
}
<form style="width:100px;" name="myForm">
<td>
<td>Units:</td>
<td>
<Select name="units">
<option>Metres</option>
<option>Feet</option>
</select>
</td>
</tr>
</form>
<form>
<table>
<tr>
<td style="padding-right:10px;">Height:</td>
<td>
<input style="width:100px;" type="text" name="Height" id="height">
</td>
</tr>
<tr>
<td style="padding-right:10px;">Width:</td>
<td>
<input style="width:100px;" type="text" name="Width" id="width">
</td>
</tr>
<tr>
<td style="padding-right:10px;">Depth:</td>
<td>
<input style="width:100px;" type="text" name="Depth" id="depth">
</td>
</tr>
<br>
<tr>
<td style="padding-right:10px;">
<input type="button" onclick="Calculate()" value="Calculate" />
</td>
</tr>
<tr>
<td style="padding-right:10px;">Heat output required in kW:</td>
<td>
<p id="result"></p>
</td>
</tr>
</table>
</form>
I'm basically looking for the drop down box to change the calculation in 'var d' from the stated calculation to
((+a * +b * +c) *0.03) /14
It's as simple as that. I've read various threads but they don't all seem to quite explain what I'm after.
Any help here would be greatly appreciated.
I would give your select an id then query your select and get the selected option's text. If it's 'Metres' do it one way otherwise do it the other way, like so:
function Calculate() {
var s = document.getElementById("units");
var measure = s.options[s.selectedIndex].text;
var a = document.getElementById("height").value;
var b = document.getElementById("width").value;
var c = document.getElementById("depth").value;
var d;
if(measure=="Metres")
d = +a * +b * +c / 14;
else
d = ((+a * +b * +c) *0.03) /14;
var x = d.toFixed(2);
document.getElementById("result").innerHTML = x;
}
<form style="width:100px;" name="myForm">
<td>
<td>Units:</td>
<td>
<Select name="units" id="units">
<option>Metres</option>
<option>Feet</option>
</select>
</td>
</tr>
</form>
<form>
<table>
<tr>
<td style="padding-right:10px;">Height:</td>
<td>
<input style="width:100px;" type="text" name="Height" id="height">
</td>
</tr>
<tr>
<td style="padding-right:10px;">Width:</td>
<td>
<input style="width:100px;" type="text" name="Width" id="width">
</td>
</tr>
<tr>
<td style="padding-right:10px;">Depth:</td>
<td>
<input style="width:100px;" type="text" name="Depth" id="depth">
</td>
</tr>
<br>
<tr>
<td style="padding-right:10px;">
<input type="button" onclick="Calculate()" value="Calculate" />
</td>
</tr>
<tr>
<td style="padding-right:10px;">Heat output required in kW:</td>
<td>
<p id="result"></p>
</td>
</tr>
</table>
</form>

Multiple instances of same calculator in Javascript

I am new to Javascript and trying to create an on-line score tracker for a card game I play called Hand and Foot. The rules are this, 3 teams play 4 games, the team with the most points at the end wins. I have created a calculator for 1 person for 1 game, but when I duplicate it for the 11 more instances I need, the calculations stop working which I believe has to do with the getElementById not registering with the multiple instances in the html. I would be grateful suggestions on a more elegant way to create instances of this calculator on the same page without having to change the IDs of each field for each play and each game. check out my code Fiddle
<div class="P1G1">
<h1>Game 1</h1>
<form id="calcP1G1">
<h2>Neccessary Piles</h2>
<table>
<td>Clean</td>
<td align="center">
<input id="necCleanP1G1" type="checkbox" class="addon" value="500">
</td>
<td>Dirty</td>
<td align="center">
<input id="necDirtyP1G1" type="checkbox" class="addon" value="300">
</td>
<td>Sevens</td>
<td align="center">
<input id="necSevenP1G1" type="checkbox" class="addon" value="5000">
</td>
<td>Fives</td>
<td align="center">
<input id="necFiveP1G1" type="checkbox" class="addon" value="3000">
</td>
<td>Wilds</td>
<td align="center">
<input id="necWildP1G1" type="checkbox" class="addon" value="2500">
</td>
<td id="necTotalP1G1" style="display:none"></td>
</table>
<hr>
<table>
<tr>
<th class="pile-header">Clean Piles</th>
<th></th>
</tr>
<tr>
<td class="input-number">
<input id="cleanP1G1" type="text" value="0" oninput="calculate()" class="form-control" />
</td>
<td class="result-number">
<input id="resultCleanP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
<tr>
<th class="pile-header">Dirty Piles</th>
<th></th>
</tr>
<tr>
<td class="input-number">
<input id="dirtyP1G1" type="text" oninput="calculate()" value="0" class="form-control" />
</td>
<td class="result-number">
<input id="resultDirtyP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
<tr>
<th class="pile-header">Red 3s</th>
<th></th>
</tr>
<tr>
<td class="input-number">
<input id="redThreeP1G1" oninput="calculate()" value="0" class="form-control" />
</td>
<td class="result-number">
<input id="resultRedThreeP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
<tr>
<th class="pile-header">Card Count</th>
<th></th>
</tr>
<tr>
<td class="input-number">
<input id="cardsP1G1" oninput="calculate()" value="0" class="form-control" />
</td>
<td class="result-number">
<input id="resultCardP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
<tr>
<td class="pile-header">Total</td>
<td class="result-number">
<input id="resultTotalP1G1" disabled="disabled" class="form-control" />
</td>
</tr>
</table>
</form>
</div>
Javascript
function updateTotal() {
var add = 0;
var form = document.getElementById("calcP1G1");
var checkboxes = form.getElementsByClassName('addon');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
add += parseInt(checkboxes[i].value, 10);
}
}
var amount = document.getElementById("necTotalP1G1").innerHTML = add;
}
document.getElementById("calcP1G1").addEventListener('change', updateTotal);
// Run it once at startup
updateTotal();
function calculate() {
var topCards = document.getElementById("necTotalP1G1").innerHTML;
var cleanBox = document.getElementById("cleanP1G1").value;
var totalClean = document.getElementById("resultCleanP1G1");
var resultClean = cleanBox * 500;
totalClean.value = resultClean;
//---------------------//
var dirtyBox = document.getElementById("dirtyP1G1").value;
var totalDirty = document.getElementById("resultDirtyP1G1");
var resultDirty = dirtyBox * 300;
totalDirty.value = resultDirty;
//---------------------//
var redThreeBox = document.getElementById("redThreeP1G1").value;
var totalRedThree = document.getElementById("resultRedThreeP1G1");
var resultRedThree = redThreeBox * 100;
totalRedThree.value = resultRedThree;
//---------------------//
var cardBox = document.getElementById("cardsP1G1").value;
var totalCard = cardBox;
document.getElementById("resultCardP1G1").value = totalCard;
//---------------------//
var total = parseInt(resultDirty) + parseInt(resultClean) + parseInt(resultRedThree) + parseInt(totalCard) + parseInt(topCards);
document.getElementById("resultTotalP1G1").value = total;
}
document.getElementById("calcP1G1").addEventListener('change', calculate);
// Run it once at startup
calculate();

building a javascript invoice system

ok, I'll try this again, my bad.
I am trying to build a very simple php invoice system just for inputting data, writing it to a database, and ultimately sending the Info to a file for printing. The problem I am haviung, besides being pretty new to javascript is getting a grand total from multiple lines of items and totals. I will post the page I have started to work with
<script type="text/javascript">
function add()
{
var a = parseInt(document.frm.A.value);
var b = parseInt(document.frm.B.value);
var result = parseInt(document.frm.Result.value);
var result=a*b;
document.frm.Result.value=result;
}
</script>
<style type="text/css">
body,td,th {
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
}
body {
background-color: #000;
}
</style>
HTML:
<form name="frm">
<p> </p>
<table width="66%" border="1">
<tr bgcolor="#B80000">
<td width="60%"><div align="center">Item Description</div></td>
<td width="11%"><div align="center">Price Per</div></td>
<td width="15%"><div align="center">Quantity</div></td>
<td width="14%"><div align="center">SubTotal</div></td>
</tr>
<tr>
<td><div align="center">
<input name="item" type="Text" id="item" size="100" >
</div></td>
<td><div align="center">
<input name="A" type="Text" id="A" onChange="add()" size="5" >
</div></td>
<td><div align="center">
<input name="B" type="Text" id="B" onChange="add()" size="5" >
</div></td>
<td><div align="center">
<input name="Result" type="Text" id="Result" size="8" >
</div></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center">
TOTAL:
<input name="Total" type="Text" id="Total" size="8">
</div></td>
</tr>
</table>
</form>
So I am trying to figure out how to take the total from the SubTotal column and have it summed in the TOTAL field. If I have multiple rows, i need to have all the subtotals added together. Been working on it for days and cant figure it out.
If I have multiple rows setup this way:
<form name="frm">
<p> </p>
<table width="66%" border="1">
<tr bgcolor="#B80000">
<td width="60%"><div align="center">Item Description</div></td>
<td width="11%"><div align="center">Price Per</div></td>
<td width="15%"><div align="center">Quantity</div></td>
<td width="14%"><div align="center">SubTotal</div></td>
</tr>
<tr>
<td><div align="center">
<input name="item" type="Text" id="item" size="100" >
</div></td>
<td><div align="center">
<input name="A" type="Text" id="A" onChange="Adder()" size="5" >
</div></td>
<td><div align="center">
<input name="B" type="Text" id="B" onChange="Adder()" size="5" >
</div></td>
<td><div align="center">
<input name="Result" type="Text" id="Result" size="8" >
</div></td>
</tr>
<tr>
<td><div align="center">
<input name="item2" type="Text" id="item2" size="100" >
</div></td>
<td><div align="center">
<input name="A2" type="Text" id="A2" onChange="Adder()" size="5" >
</div></td>
<td><div align="center">
<input name="B2" type="Text" id="B2" onChange="Adder()" size="5" >
</div></td>
<td><div align="center">
<input name="Result2" type="Text" id="Result2" size="8" >
</div></td>
</tr>
<tr>
<td><div align="center">
<input name="item3" type="Text" id="item3" size="100" >
</div></td>
<td><div align="center">
<input name="A3" type="Text" id="A3" onChange="Adder()" size="5" >
</div></td>
<td><div align="center">
<input name="B3" type="Text" id="B3" onChange="Adder()" size="5" >
</div></td>
<td><div align="center">
<input name="Result3" type="Text" id="Result3" size="8" >
</div></td>
</tr>
<tr>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
<td><div align="center">
TOTAL:
<input name="Total" type="Text" id="Total" size="8" onChange="Adder()" >
</div></td>
</tr>
</table>
</form>
will the javascript work when I add the other elements to it? or am i going in the wrong direction
From the perspective of your current code, the following would work:
function add() {
var a = parseInt(document.frm.A.value);
var b = parseInt(document.frm.B.value);
var result = parseInt(document.frm.Result.value); // <-- This line is unnecessary
var result = a * b;
document.frm.Result.value = result;
document.frm.Total.value = result; // I added this line
}
EDITED: I came up with a slightly cumbersome method of scaling the above with multiple rows as follows.
Give specific ID's to each of your rows and their result pairs like so:
<input name="A" type="Text" id="A1" onChange="add(1)" size="5" />
<!-- ... -->
<input name="B" type="Text" id="B1" onChange="add(1)" size="5" />
<!-- ... -->
<input name="Result" type="Text" id="Result1" size="8" />
(the next row would then have the number 2 added where you have 1 above)
You could then use the following js:
function add(row) {
var a = parseInt(document.getElementById('A'+row).value);
var b = parseInt(document.getElementById('B'+row).value);
if (a > 0 && b > 0) {
document.getElementById('Result'+row).value = a * b;
document.getElementById('Total').value = parseInt(document.getElementById('Result1').value) + parseInt(document.getElementById('Result2').value);
}
}
I'm sure this could be done in a better way, but I believe it's a good one to start with...
Here you can play with a demo.
Try:
function add(){
var table = document.getElementsByTagName('table')[0];
var tr = table.getElementsByTagName('tr'), sum = 0;
for(var i=1,l=tr.length; i<l; i++){
var inputs = tr[i].getElementsByTagName('input'), sub = 1;
for(var n=1; n<3; n++){
sub *= inputs[n].value;
}
sum += inputs[3].value = sub;
}
totalNode.innerHTML = sum;
}
Swap out totalNode with the div you want your total in. I would actually not use inputs for your subtotals as well, but that would require I rewrite this function. I also don't recommend putting JavaScript into your HTML like that, usually. You'll learn.

Categories