By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,466 Members | 1,148 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,466 IT Pros & Developers. It's quick & easy.

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

P: 2
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.

Expand|Select|Wrap|Line Numbers
  1. <!doctype html>
  2. <!-- attempt3.html                                  some guy -->
  3. <!-- Web page that calculates the calculates interest quarterly -->
  4. <!-- =================================================== -->
  5.  
  6. <html>
  7.  <head>
  8.    <title> quarterly interest </title>
  9.  </head>
  10.  
  11.  <body>
  12.    <h2>Quarterly Interest Calculator</h2>
  13.    <p>
  14.  
  15. <table border="1">
  16. <tr>
  17.      <th>Beginning Balance:</th> <th>$<input type="text" id="amountBox" size=10 value="10000"></th>
  18.      <br>
  19. </tr>
  20. <tr>
  21.      <th>Interest Rate:</th> <th><input type="text" id="interestBox" size=10 value="3.5">%</th>
  22.    </p>  
  23.    <input type="button" value="Click for Calculation" 
  24.           onclick="Q1 = parseFloat(document.getElementById('amountBox').value);
  25.                    interest = Q1 * ((document.getElementById('interestBox').value)/100);
  26.                    document.getElementById('outputDiv').innerHTML=    
  27.             'Total interest Earned: ' + interest;">
  28. <script>
  29.  document.getElementById('outputDiv')
  30.       <br>
  31. <table border="1">
  32.  
  33. <tr>
  34. <th>Quarter</th>
  35. <th>Principal</th>
  36. <th>Interest Earned</th>
  37. </tr>
  38.  
  39. <tr>
  40. <td>1</td>
  41. <td>$</td>
  42. <td>$ </td>
  43. </tr>
  44.  
  45. <tr>
  46. <td>2</td>
  47. <td>$</td>
  48. <td>$</td>
  49. </tr>
  50.  
  51. <tr>
  52. <td>3</td>
  53. <td>$</td>
  54. <td>$</td>
  55. </tr>
  56.  
  57. <tr>
  58. <td>4</td>
  59. <td>$</td>
  60. <td>$</td>
  61. </tr>
  62.  
  63. </table> 
  64.  
  65.    <hr>
  66.    <div id="outputDiv"></div>
  67.  
  68.  </body>
  69.  
  70. </html>
  71.  
Sep 26 '11 #1
Share this Question
Share on Google+
1 Reply


P: 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.
Expand|Select|Wrap|Line Numbers
  1. <!doctype html>
  2. <!-- attempt3.html                                  some guy -->
  3. <!-- Web page that calculates interest quarterly -->
  4. <!-- =================================================== -->
  5.  
  6. <html>
  7.  <head>
  8.  
  9.    <title> quarterly interest </title>
  10.  
  11.  </head>
  12.  
  13.  <body>
  14.  
  15.    <h2>Quarterly Interest Calculator</h2>
  16.  
  17.    <p>
  18.  
  19. <table border="1">
  20. <tr>
  21.      <th>Beginning Balance:</th> <th>$<input type="text" id="amountBox" size=10 value="10000"></th>
  22.  
  23.      <br>
  24. </tr>
  25. <tr>
  26.      <th>Interest Rate:</th> <th><input type="text" id="interestBox" size=10 value="3.5">%</th>
  27.  
  28.    </p>  
  29.  
  30.  
  31.    <input type="button" value="Click for Calculation" 
  32.  
  33.           onclick="Q1=document.getElementById('amountBox').value;
  34.  
  35.         interest=document.getElementById('interestBox').value)/100;
  36.  
  37.  
  38.  
  39.       <br>
  40.  
  41.  
  42. <table border="1">
  43.  
  44. <tr>
  45.  
  46. <th>Quarter</th>
  47.  
  48. <th>Principal</th>
  49.  
  50. <th>Interest Earned</th>
  51.  
  52. </tr>
  53.  
  54. <tr>
  55.  
  56. <td>1</td>
  57.  
  58. <td>$ 10,000 </td>
  59.  
  60. <td>$ 350 </td>
  61.  
  62. </tr>
  63.  
  64. <tr>
  65.  
  66. <td>2</td>
  67.  
  68. <td>$ 10,350</td>
  69.  
  70. <td>$ 362.25</td>
  71.  
  72. </tr>
  73.  
  74. <tr>
  75.  
  76. <td>3</td>
  77.  
  78. <td>$ 10712.25</td>
  79.  
  80. <td>$ 374.928</td>
  81.  
  82. </tr>
  83.  
  84. <tr>
  85.  
  86. <td>4</td>
  87.  
  88. <td>$ 11087.18</td>
  89.  
  90. <td>$ 388.05</td>
  91.  
  92. </tr>
  93.  
  94. </table> 
  95.  
  96.  
  97. <script type="text/javascript">
  98.  
  99.  
  100.         Q1=document.getElementById('amountBox').value;
  101.  
  102.         interest=document.getElementById('interestBox').value)/100;
  103.  
  104.         Qa=Q1*interest;
  105.  
  106.         Qb=Q2*interest;
  107.  
  108.         Qc=Q3*interest;
  109.  
  110.  
  111.  
  112.         Q2=Q1+Qa;
  113.  
  114.         Q3=Q2+Qb;
  115.  
  116.         Q4=Q3+Qc;"
  117. </script>
  118.  
  119.  
  120.  
  121.  
  122.    <hr>
  123.  
  124.  
  125.  
  126.  </body>
  127.  
  128. </html>
  129.  
Sep 26 '11 #2

Post your reply

Sign in to post your reply or Sign up for a free account.