Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Enabling Option buttons for an interest /principal calculator

Status
Not open for further replies.
wjgrayson

wjgrayson

Technical User
Jun 1, 2004
75
US
This might be the last question I post on exercises I'm doing in this Javascript book I've purchased -- it really isn't giving enough background for novices to do the exercises based on the examples and explanations. So the question is:

"modify the javascript code so it provides for the option buttons. When the user clicks the Yearly interest button [this is an interest calculator using JS] the application should compound the interest yearly. When the user clicks the Monthly interest button, the application should compound the interest monthly".

Yuck. You will see how I've started the code (see comment lines), but I just don't have a clue on how to continue. Perhaps based on the answers I receive, I'll make a decision on whether or not I need to find a more remedial source for instruction. I have to admit, I liked the book because it shows real web applications using javascript. I just can't take any more tutorials with 'document.write "hello world!" ' anymore. But if I don't understand the basics of the exercises in the book, I might need to step back a bit in my js self-training. Thanks for letting me rant. So, here's the code:

THE HTML CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Future Value Calculator</title>
<style type="text/css">
@import url("future_value.css");
</style>
<script type="text/javascript" src="future_value.js"></script>
</head>

<body>
<div id="content">
<h1>Future Value Calculator</h1>
<p><input type="radio" name="calctype" id="monthly"
value="monthly" checked />Monthly Interest</p>
<p><input type="radio" name="calctype" id="yearly"
value="yearly" />Yearly Interest</p>
<p>Enter the values below and click "Calculate".</p>

<label for="investment">One-Time Investment:</label>
<select name="investment" id="investment"
<optgroup label="">
<option value="1000">$1,000</option>
<option value="5000">$5,000</option>
<option value="10000">$10,000</option>
<option value="25000">$25,000</option>
<option value="other">Other value</option>
</optgroup>
</select><br />

<label for="rate">Yearly Interest Rate:</label>
<select name="rate" id="rate"
<optgroup label="">
<option value="4%">4%</option>
<option value="6%">6%</option>
<option value="8%">8%</option>
<option value="10%">10%</option>
</optgroup>
</select><br />

<label for="years">Number of Years:</label>
<input type="text" id="years" /><br />

<label for="futureValue">Future Value:</label>
<input type="text" id="futureValue" disabled="disabled" /><br />

<label>&nbsp;</label>
<input type="button" id="calculate" value="Calculate" /><br />

<p><input type="checkbox" name="display" id="display" value="display" checked />
Display both monthly and yearly results in the text area.</p>

<p>Results</p>
<textarea name="results" id="results" rows="4" cols="50"></textarea>
</div>
</body>
</html>

THE JAVASCRIPT CODE
var $ = function (id) {
return document.getElementById(id);
}

var calculate_click = function () {

var investment = parseFloat( $("investment").value );
var annualRate = parseFloat( $("rate").value );
var years = parseInt( $("years").value );
var monthly = parseInt ( $("monthly").value); //I think I need to add this variable?
var yearly = parseInt ( $("yearly").value); // I think I need to add this variable?

$("futureValue").value = "";

if (isNaN(investment) || investment <= 0) {
alert("Investment must be a valid number\nand greater than zero.");
} else if(isNaN(annualRate) || annualRate <= 0) {
alert("Annual rate must be a valid number\nand greater than zero.");
} else if(isNaN(years) || years <= 0) {
alert("Years must be a valid number\nand greater than zero.");
} else {
var monthlyRate = annualRate / 12 / 100;
var months = years * 12;
var futureValue = investment;

for ( i = 1; i <= months; i++ ) {
futureValue = futureValue * (1 + monthlyRate);
}
$("futureValue").value = futureValue.toFixed(2);
}
}
//this is as far as I got with the code to enable the radio buttons. See below.
// FYI--calculate button does not work with this code inserted.
// FF error console and Firebug flags the first line of the "if" statement containing the "monthly" ID as "null".

var status = "unknown";
if ( $("monthly").checked ) {
status = $("monthly").value;
}
if ( $("yearly").checked ) {
status =$("yearly").value;
}

window.onload = function () {
$("calculate").onclick = calculate_click;
$("investment").focus();
}
 
Sort by date Sort by votes
Assuming your Js code is coming in from the included file future_value.js, your JS code is running before the page fully loads, and before all elements are there to be used, which means your $("monthly") gets run before there's an a actual element with that ID.

Not sure what you are attempting to do there, but perhaps just adding an If statement to your calculation function to check which radio button is checked may be enough.

Code: 
var calculate_click = function () 
{
    
  if($("monthly").checked){
   //do monthly calculations here.
  }
  else if($("yearly").checked){
  // do yearly calculations here
  }
  else{
  //issue error alert than neither one is checked for some reason
  }
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
Okay. This makes sense --- kinda. Error Console is giving me a "null" error for the line containing $("monthly"). See my attempt at adding an "if" statement. Note: This may be a bit wacky, but you'll see two variables I've added:

var futureValue = 0 //this is the calculation I think needs to be used for interest compounding monthly which coincides with the "monthly" checkbox.
var futureValue = investment //this is the calculation I think needs to be used for interest compounding annually which corresponds with the "yearly" checkbox.

What follows is my attempt at coding. I was working on this while you were posting your response.

var status = "unknown";
if ( $("monthly").checked ) {
status = $("monthly").value;
}
if ( $("yearly").checked ) {
status = $("yearly").value;
}

if ( status == "unknown" ) {
alert ('you must choose either "MONTHLY interest" or "YEARLY interest" to continue.');
} else if ( status == "monthly" ) {
var futureValue = 0;
} else if ( status == "yearly" ) {
var futureValue = investment;
}
 
Upvote 0 Downvote
your If statements are outside your function as far as I can tell which is why they get run as soon as the JS file is included.

Move them inside the calculate_click function() function.

and your code here:

Code: 
var status = "unknown";
    if ( $("monthly").checked ) {
    status = $("monthly").value;
    }
    if ( $("yearly").checked ) {
    status = $("yearly").value;
    }

if  ( status == "unknown" ) {
    alert ('you must choose either "MONTHLY interest" or "YEARLY interest" to continue.');
} else if  ( status == "monthly"  ) {
    var futureValue = 0;
} else if ( status == "yearly" ) {
    var futureValue = investment;
}

Is just doing the same thing twice.

If you already know the radio box is checked you now what should be done so no need to extract a value and then check again.

Code: 
var status = "unknown";
    if ( $("monthly").checked ) {
    var futureValue = 0;
    }
    else if ( $("yearly").checked ) {
    var futureValue = investment;
    }
    else{
       alert ('you must choose either "MONTHLY interest" or     "YEARLY interest" to continue.');
    }

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
283
Rayj0000
Rayj0000
TheLazyPig
  • Locked
  • Question
Dropdown (option) using Anguarjs
Replies
0
Views
286
TheLazyPig
TheLazyPig
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
733
Mike Lewis
Mike Lewis
chikwendu
  • Locked
  • Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
107
chikwendu
chikwendu
mayamanako
  • Locked
  • Question
Only Visible Radio Buttons Are Required 1
Replies
4
Views
119
mayamanako
mayamanako

Part and Inventory Search

Sponsor

Back
Top