CODEWITHSUNDEEP
javascriptjqueryhtml
Brystephor
Brystephor

Reputation: 355

Can't get Jquery to write the output of a function to html

new guy here. I have a feeling this is an extremely basic question but I can't get this Jquery code to write the output of the function to html and have it show up. I believe it's an issue with the script but unsure if I am doing something wrong with html as well.

The goal of this function is to create a calculator that gives future investment value based on what the user inputs. When I click submit, It used to change all of the html to show just 'NaN' but now when I click the submit button, it clears the input boxes but does not give me any number or any answer even though I believe I've set it to display the number to

HTML

<body>
    <div id = "futurevalue">
        <form>
            <input type="radio" name="formula" value="future_investment" checked>Future Investment<br>
            <label for="princeple">Enter the princeple amount invested:</label>
            <input id="princeple" type="number" name="princeple" step="0.01"><br>
            <label for="time">Enter how long the investment will be for (in years):</label>
            <input id='time' type='number' name='time'><br>
            <label for='rate'>Enter the expected interest rate:</label>
            <input id='rate' type="number" name='rate'><br>
            <input id='submit' type='submit' name='submit'>
        </form>
        <p>Total:</p>
        <p id='result'></p>
    </div>

jQuery

 $('#submit').click(function(){
    $('#result').html(function(){
        return toString(output,10);
    });
});
var princeple = parseInt($('#princeple'),10);  
var time = parseInt($('#time'),10);
var rate = parseInt($('#rate'),10);
var output = (princeple * time + rate);

Upvotes: 2

Views: 76

Answers (2)

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

Here is your fix:

$('#submit').click(function(){
  var princeple = parseInt($('#princeple').val());  
  var time = parseInt($('#time').val());
  var rate = parseFloat($('#rate').val()/100);
  var output = ((princeple * rate) * time);
  $('#result').html(output);
  //prevent from page reload
  return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "futurevalue">
        <form>
            <input type="radio" name="formula" value="future_investment" checked>Future Investment<br>
            <label for="princeple">Enter the princeple amount invested:</label>
            <input id="princeple" type="number" name="princeple" step="0.01"><br>
            <label for="time">Enter how long the investment will be for (in years):</label>
            <input id='time' type='number' name='time'><br>
            <label for='rate'>Enter the expected interest rate:</label>
            <input id='rate' type="number" name='rate'><br>
            <input id='submit' type='submit' name='submit'>
        </form>
        <p>Total:</p>
        <p id='result'></p>
    </div>

You have to calculate the value inside the click event and assign to the result. The formula for calculating interest is also incorrect.

Upvotes: 3

GibboK
GibboK

Reputation: 73928

Try the following code, basically you need: Calculate your variables inside cb click and than output the resut in your div #result. Use .val to get values for your inputs and event.preventDefault() to avoid form submit (which is the browser default behavior).

$('#submit').click(function(event) {
  var princeple = parseInt($('#princeple').val(), 10);
  var time = parseInt($('#time').val(), 10);
  var rate = parseInt($('#rate').val(), 10);
  var output = (princeple * time + rate);
  $('#result').html(output);
  event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="futurevalue">
  <form>
    <input type="radio" name="formula" value="future_investment" checked>Future Investment<br>
    <label for="princeple">Enter the princeple amount invested:</label>
    <input id="princeple" type="number" name="princeple" step="0.01"><br>
    <label for="time">Enter how long the investment will be for (in years):</label>
    <input id='time' type='number' name='time'><br>
    <label for='rate'>Enter the expected interest rate:</label>
    <input id='rate' type="number" name='rate'><br>
    <input id='submit' type='submit' name='submit'>
  </form>
  <p>Total:</p>
  <p id='result'></p>
</div>

Upvotes: 3

Related Questions