How do you write a formula and use variables in javascript/html?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Nk Inc
    New Member
    • Sep 2011
    • 2

    #1

    How do you write a formula and use variables in javascript/html?

    What I am looking to do is create a group of variables that work off each other and I'm not sure how to do this. I'm looking to create a webpage that compounds interest quarterly and am not sure how I would go about implementing the code and variables.


    I believe I have the page lain out but am not sure how to go about making the variables change with each quarter. So I can get quarter one complete, but have no idea how to write the formulas or code that work off the first quarter to complete the second quarter. Here is my haphazard attempt and what I have done so far. Any help is greatly appreciated.

    Code:
    <!doctype html>
    <!-- attempt3.html                                  some guy -->
    <!-- Web page that calculates the calculates interest quarterly -->
    <!-- =================================================== -->
    
    <html>
     <head>
       <title> quarterly interest </title>
     </head>
    
     <body>
       <h2>Quarterly Interest Calculator</h2>
       <p>
    
    <table border="1">
    <tr>
         <th>Beginning Balance:</th> <th>$<input type="text" id="amountBox" size=10 value="10000"></th>
         <br>
    </tr>
    <tr>
         <th>Interest Rate:</th> <th><input type="text" id="interestBox" size=10 value="3.5">%</th>
       </p>  
       <input type="button" value="Click for Calculation" 
              onclick="Q1 = parseFloat(document.getElementById('amountBox').value);
                       interest = Q1 * ((document.getElementById('interestBox').value)/100);
                       document.getElementById('outputDiv').innerHTML=	
    			'Total interest Earned: ' + interest;">
    <script>
     document.getElementById('outputDiv')
          <br>
    <table border="1">
    
    <tr>
    <th>Quarter</th>
    <th>Principal</th>
    <th>Interest Earned</th>
    </tr>
    
    <tr>
    <td>1</td>
    <td>$</td>
    <td>$ </td>
    </tr>
    
    <tr>
    <td>2</td>
    <td>$</td>
    <td>$</td>
    </tr>
    
    <tr>
    <td>3</td>
    <td>$</td>
    <td>$</td>
    </tr>
    
    <tr>
    <td>4</td>
    <td>$</td>
    <td>$</td>
    </tr>
    
    </table> 
    
       <hr>
       <div id="outputDiv"></div>
    
     </body>
    
    </html>
    Last edited by Dormilich; Sep 26 '11, 11:12 AM. Reason: condensing the code
  • Nk Inc
    New Member
    • Sep 2011
    • 2

    #2
    I'm starting to get a bit closer to what I need to have but still feel lost. I will post my progress. I am still lost as to what I need to do with the variables to make this work. ANY help would be greatly appreciated at this point. I will continue to edit this as I go.
    Code:
    <!doctype html>
    <!-- attempt3.html                                  some guy -->
    <!-- Web page that calculates interest quarterly -->
    <!-- =================================================== -->
    
    <html>
     <head>
    
       <title> quarterly interest </title>
    
     </head>
    
     <body>
    
       <h2>Quarterly Interest Calculator</h2>
    
       <p>
    
    <table border="1">
    <tr>
         <th>Beginning Balance:</th> <th>$<input type="text" id="amountBox" size=10 value="10000"></th>
    
         <br>
    </tr>
    <tr>
         <th>Interest Rate:</th> <th><input type="text" id="interestBox" size=10 value="3.5">%</th>
    
       </p>  
    		
     
       <input type="button" value="Click for Calculation" 
    
              onclick="Q1=document.getElementById('amountBox').value;
    
    		interest=document.getElementById('interestBox').value)/100;
    
    
    	
          <br>
    
    
    <table border="1">
    
    <tr>
    
    <th>Quarter</th>
    
    <th>Principal</th>
    
    <th>Interest Earned</th>
    
    </tr>
    
    <tr>
    
    <td>1</td>
    
    <td>$ 10,000 </td>
    
    <td>$ 350 </td>
    
    </tr>
    
    <tr>
    
    <td>2</td>
    
    <td>$ 10,350</td>
    
    <td>$ 362.25</td>
    
    </tr>
    
    <tr>
    
    <td>3</td>
    
    <td>$ 10712.25</td>
    
    <td>$ 374.928</td>
    
    </tr>
    
    <tr>
    
    <td>4</td>
    
    <td>$ 11087.18</td>
    
    <td>$ 388.05</td>
    
    </tr>
    
    </table> 
    
    
    <script type="text/javascript">
    
    
    		Q1=document.getElementById('amountBox').value;
    
    		interest=document.getElementById('interestBox').value)/100;
    
    		Qa=Q1*interest;
    
    		Qb=Q2*interest;
    
    		Qc=Q3*interest;
    
    
    
    		Q2=Q1+Qa;
    
    		Q3=Q2+Qb;
    
    		Q4=Q3+Qc;"
    </script>
    
    
    
    
       <hr>
    
    
    
     </body>
    
    </html>

    Comment

    Working...