CODEWITHSUNDEEP
javascripthtmlforms
Tyson L.
Tyson L.

Reputation: 53

How do I retrieve values put in an input box for use with my function?

I'm trying to take values from a few input boxes in my html and return the value inside of another in input element.

If i hardcode the var with the info I want, it does return a value properly.

My code looks like this:

<html>  
    <head>
    <title>Compounding interest in javascript</title>
    </head>
    <body>
    <script type="text/javascript">
    var term = 0;
    var interest = 0; 
    var contribution = 0; 
    var balance = 0;

    function calcValue(){

        term = document.getElementById("numOfMonths");
        interest = (document.getElementById("interestRate")/100) / 12;
        contribution = document.getElementById("amountPerMonth");

        for (i=0;i<(term+1);i++){
            balance = (balance + contribution) * (1 + interest);

                var rounded = Math.round( balance * 100 ) / 100;
                document.getElementById("#finalValue").value = rounded;
        }
    }


    </script>
    <form>
        <h3  id="amountPerMonth">Enter Amount You Would Like To Set Aside Per Month</h3>
        <input type="text">
        <h3>Enter The Number Of Months Before You Plan To Withdraw</h3>
        <input type="text" id="numOfMonths">
        <h3 id="interestRate">Enter Your Interest Rate</h3>
        <input type="text">
        <input type="button" id="calcButton" value="Click Me!" onClick="calcValue()">
        <input type="text" id="finalValue">
    </form>
    </body>
    </html>

Thanks for your help!

Upvotes: 1

Views: 521

Answers (4)

Rahul
Rahul

Reputation: 73

There are a few things you can improve in your code-

  1. The variables you are using in a particular method should be in declared inside the method.

  2. document.getElementById("id") returns DOM object, so you should use ".value' to get value of text box.

  3. Instead of writting id="amountPerMonth" and id="interestRate" with <h3> you should write it with <input> box, so that you can get value from it. Other wise document.getElementById will not work.

  4. Once you get the final value of balance, you can assign it outside the for loop.

Here is the solution for your code-

    <html>
    <head>
    <title>Compounding interest in javascript</title>
    <script type="text/javascript">
    function calcValue() {
    var balance = 0;
    var term = document.getElementById("numOfMonths").value;
    var interest = (document.getElementById("interestRate").value / 100) / 12;
    var contribution = document.getElementById("amountPerMonth").value;

    for (i = 0; i < (term + 1); i++) {
    balance = (balance + contribution) * (1 + interest);
    }
    var rounded = Math.round(balance);
    document.getElementById("finalValue").value = rounded;
    }
    </script>
    </head>
    <body>
    <form>
    <h3>Enter Amount You Would Like To Set Aside Per Month</h3>
    <input type="text" id="amountPerMonth">
    <h3>Enter The Number Of Months Before You Plan To Withdraw</h3>
    <input type="text" id="numOfMonths">
    <h3>Enter Your Interest Rate</h3>
    <input type="text" id="interestRate">
    <input type="button" id="calcButton" value="Click Me!" onClick="calcValue()"> 
    <input type="text" id="finalValue">
    </form>
    </body>
    </html>

Upvotes: 0

Barmar
Barmar

Reputation: 780994

You need to use .value to get the contents of an input field. And you should use Number() to convert a string input to a number (you could also use parseInt() or parseFloat() if you want to specify what type of number to convert it to).

And there's no reason to put the result into the output field every time through the loop, just do it once at the end.

You should initialize balance to zero every time you call the function. Otherwise, you'll add the contributions to the previous balance.

Another problem is that you have <h3 id="amountPerMonth"> and <h3 id="interestRate">. The ID should be in the <input>.

function calcValue() {
  var balance = 0;
  var term = Number(document.getElementById("numOfMonths").value);
  var interest = Number(document.getElementById("interestRate").value) / 100 / 12;
  var contribution = Number(document.getElementById("amountPerMonth").value);

  for (i = 0; i < (term + 1); i++) {
    balance = (balance + contribution) * (1 + interest);
  }
  var rounded = Math.round(balance * 100) / 100;
  document.getElementById("finalValue").value = rounded;
}
<form>
  <h3>Enter Amount You Would Like To Set Aside Per Month</h3>
  <input type="text" id="amountPerMonth">
  <h3>Enter The Number Of Months Before You Plan To Withdraw</h3>
  <input type="text" id="numOfMonths">
  <h3>Enter Your Interest Rate</h3>
  <input type="text" id="interestRate">
  <input type="button" id="calcButton" value="Click Me!" onClick="calcValue()">
  <input type="text" id="finalValue">
</form>

BTW, you know there's a formula to compute compound interest, you don't need to use a loop for it, right? See Wikipedia

Upvotes: 1

Abhishek Singh
Abhishek Singh

Reputation: 369

Here is a solution to your problem: HTML:

<form>
<label for="amountPerMonth">Enter Amount You Would Like To Set Aside Per Month</label>
    <input type="text" name="amountPerMonth" id="amountPerMonth"/>
    <br/><br/>
    <label for="numOfMonths">Enter The Number Of Months Before You Plan To Withdraw</label>
    <input type="text" name="numOfMonths" id="numOfMonths"/><br/><br/>
    <label for="interestRate">Enter Your Interest Rate</label>
    <input type="text" name="interestRate" id="interestRate"/><br/><br/>
    <input type="button" id="calcButton" value="Calculate"/>
    <br/><br/>
    <input type="text" name="finalValue" id="finalValue"/>
</form>

jQuery:

var term = 0;
var interest = 0; 
var contribution = 0; 
var balance = 0;
var i=0;
var rounded=0;

$('#calcButton').click(function(){
term = parseInt($("#numOfMonths").val());
    interest = (parseInt($("#interestRate").val())/100) / 12;
    contribution = parseInt($("#amountPerMonth").val());

    for (i=0;i<(term+1);i++){
        balance = (balance + contribution) * (1 + interest);

            var rounded = Math.round( balance * 100 ) / 100;
            $("#finalValue").val(rounded);
    }
});

And here's a fiddle for this:

https://jsfiddle.net/2cg2kncn/

Upvotes: 0

swathis
swathis

Reputation: 366

These are few issues with your code.

  1. document.getElementById("id") will fetch the DOM element. To get the value, you need to use document.getElementById("id").value

  2. The "id" attributes need to be set on the input elements instead of the h3, because you are accessing document.getElementById("amountPerMonth").value and "value" attribute applies for elements such as input and not headings etc.

  3. document.getElementById is a javascript function and you need to pass a string as the attribute. Passing "#id" will look for the an element with id as "#id". You seem to be confusing jQuery with Javascript here. In jQuery, it would be $("#id").

  4. In the for loop, you have (term+1) where term is actually a string. So "1" will be appended to the string causing the for loop to run an incorrect number of times. So proper use of parseInt and parseFloat need to be done.

After these changes, your program should work as expected.

This is the corrected code.

<html>  
<head>
<title>Compounding interest in javascript</title>
</head>
<body>
<script type="text/javascript">
var term = 0, interest = 0, contribution = 0, balance = 0;

function calcValue(){
    var rounded;
    term = parseInt(document.getElementById("numOfMonths").value, 10);
    interest = (parseFloat(document.getElementById("interestRate").value, 10)/100) / 12;
    contribution = parseFloat(document.getElementById("amountPerMonth").value, 10);

    for (i=0;i<(term+1);i++){
        balance = (balance + contribution) * (1 + interest);

            rounded = Math.round( balance * 100 ) / 100;                
    }
    document.getElementById("finalValue").value = rounded; 
}


</script>
<form>
    <h3>Enter Amount You Would Like To Set Aside Per Month</h3>
    <input type="text" id="amountPerMonth">
    <h3>Enter The Number Of Months Before You Plan To Withdraw</h3>
    <input type="text" id="numOfMonths">
    <h3>Enter Your Interest Rate</h3>
    <input type="text" id="interestRate">
    <input type="button" id="calcButton" value="Click Me!" onClick="calcValue()">
    <input type="text" id="finalValue">
</form>
</body>
</html>

Upvotes: 1

Related Questions