...

# Calculating values from (.innerHTML)

Razzy
06-29-2012, 10:10 PM
hey people, i have 2 problems and was wondering if someone could help me....

what i am trying to do is create a list of products, with each product having a price assigned to it. i have two sets of lists. each list will have its own total cost, and then there should be a calculation of the grand total that adds the total of list 1 and list 2.

the coding is...

<script type="text/javascript">
function calculate()
{
var qty = document.getElementById("qtyFR0").value;
var value = document.getElementById("valueFR0").value;
var qty2 = document.getElementById("qtyFR1").value;
var value2 = document.getElementById("valueFR1").value;
var qty3 = document.getElementById("qtyFR2").value;
var value3 = document.getElementById("valueFR2").value;

var result = (value * qty) + (value2 * qty2) + (value3 * qty3);

document.getElementById("result").innerHTML = result;
}

</script>

<script type="text/javascript">

function calculateTwo()
{
var qty = document.getElementById("qtyB0").value;
var value = document.getElementById("valueB0").value;
var qty2 = document.getElementById("qtyB1").value;
var value2 = document.getElementById("valueB1").value;
var qty3 = document.getElementById("qtyB2").value;
var value3 = document.getElementById("valueB2").value;

var resultTwo = (value * qty) + (value2 * qty2) + (value3 * qty3);

document.getElementById("resultTwo").innerHTML = resultTwo;
}

</script>

<script type="text/javascript">

function calcTotal()
{
var resultOne = parseInt(document.getElementById('result').innerHTML);
var resultTwo = parseInt(document.getElementById('resultTwo').innerHTML);

var total2= (resultOne + resultTwo);

document.getElementById("total").innerHTML = "&pound;"+total2;

}

</script>

<body>

<html>
<title></title>

<script language="javascript" type="text/javascript" src="test.js">
</script>
<body>

<form>
<table>
<tr>
<td>
&bull; French Fries<input type="hidden" id="valueFR0" value="2.99"/>
<br/>
Quantity:<input type="text" id="qtyFR0" size="2" value=""/>

&bull; Mccain Southern Fried Spirals<input type="hidden" id="valueFR1" value="4.20"/>
<br/>
Quantity:<input type="text" id="qtyFR1" size="2" value=""/>

&bull; Mccain Thin Fries<input type="hidden" id="valueFR2" value="4.20"/>
<br/>
Quantity:<input type="text" id="qtyFR2" size="2" value=""/>
<br/>
<input type="button" onclick="calculate();" value="Total"/>
<br/>
<span id="result"></span><br /><br />
</td>
</tr>
</table>

<table>
<tr>
<td>
&bull; lamb burger<input type="hidden" id="valueB0" value="2.99"/>
<br/>
Quantity:<input type="text" id="qtyB0" size="2" value=""/>

&bull; chicken burger<input type="hidden" id="valueB1" value="4.20"/>
<br/>
Quantity:<input type="text" id="qtyB1" size="2" value=""/>

&bull; beef burger<input type="hidden" id="valueB2" value="4.20"/>
<br/>
Quantity:<input type="text" id="qtyB2" size="2" value=""/>
<br/>
<input type="button" onclick="calculateTwo();" value="Total"/>
<br/>
<span id="resultTwo"></span><br /><br />
</td>
</tr>
</table>

</form>

<input type="button" onclick="calcTotal();" value="Total"/>
total: <span id="total"></span><br /><br />

</body>
</html>

</body>

</html>

my first problem is that i am trying to add "result" and "result2", with the resulting output being the grandtotal, however i made an attempt and it does not work :(

my second problem is, the total cost of each of the 2 lists will be on innerHTML....i would like to know if its possible to calculate the numeric values within the (innerHTML) and then show the resulting output (grandtotal) within innerHTML?

apologies in advance if it does not make sense, i am new to javascript

thank you

Old Pedant
06-29-2012, 10:43 PM
Your code worked perfectly except for two things:

(1) Your result and resultTwo values aren't rounded to two decimal places.
(2) You total is rounded to NO decimal places.

Problem (1) is fixed by doing

document.getElementById("result").innerHTML = result.toFixed(2);
document.getElementById("resultTwo").innerHTML = resultTwo.toFixed(2);

Problem (2) is fixed by doing

var resultOne = parseFloat(document.getElementById('result').innerHTML);
var resultTwo = parseFloat(document.getElementById('resultTwo').innerHTML);
var total2= (resultOne + resultTwo);
document.getElementById("total").innerHTML = "&pound;"+total2.toFixed(2);

&&&&&&&&&&&&&

If your JavaScript code doesn't work AT ALL, it may be because you have <script>...</script> tags INSIDE your "test.js" file. NO! ".js" files must be PURE javascript and should NOT have ANY tags, even <script> tags, in them.

Razzy
07-06-2012, 12:27 PM
thank you very much old pedant it works perfectly :)