Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    41
    Thanks
    14
    Thanked 1 Time in 1 Post

    Calculating values from (.innerHTML)

    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...

    Code:
    <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>
    	<head>
    		<title></title>
    		
    		<script language="javascript" type="text/javascript" src="test.js">
    		</script>
    	</head>
    <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

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,185
    Thanks
    80
    Thanked 4,453 Times in 4,418 Posts
    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
    Code:
    document.getElementById("result").innerHTML = result.toFixed(2);
    document.getElementById("resultTwo").innerHTML = resultTwo.toFixed(2);
    Problem (2) is fixed by doing
    Code:
    	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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Razzy (07-06-2012)

  • #3
    New Coder
    Join Date
    Jun 2012
    Posts
    41
    Thanks
    14
    Thanked 1 Time in 1 Post
    thank you very much old pedant it works perfectly


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •