Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Displaying Message in Text Area When Check Box is Checked

    I'm working on a Future Value application and having a hard time figuring out the code that displays a message in the text area when the check box is checked. An example is if the user selects a value of $5000, the message in the text area should look like this:

    Future Value of $5000

    When compounded monthly: 5415.00
    When compounded yearly: 5400.00


    Here's the code for the XHTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <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>
    And here's the JavaScript code:

    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 );
    
    	$("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 if ( $("monthly").checked ) {
    			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);
    		}
    	} else {
    	     var futureValue = investment;
    	     for ( i = 1; i <= years; i++ ) {
    	        futureValue = futureValue  * (1 + annualRate/100);
    	       }
    	            $("futureValue").value = futureValue.toFixed(2);
    	       }
    	         
    	        if ( $("display").checked) {
    				message = "Future Value of 'investment'\n\n";
    				}
    				$("results").value = 'value';
    			
    				message = "When compounded monthly:\n "
    				message = "When compounded yearly: " 
    			}
    
    window.onload = function () {
        $("calculate").onclick = calculate_click;
        $("investment").focus();
    	}
    Any help would be appreciated. Thanks!

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    It would be something
    similar to this ...

    Code:
     
    if ( $("display").checked) {
      message = "Future Value of 'investment'\n\n";    
      if ( $("monthly").checked )message += "When compounded monthly:\n "
      else message += "When compounded yearly: "
      message += futureValue;
      results.value = message;
      
     }

  • Users who have thanked DaveyErwin for this post:

    Tate (09-06-2013)

  • #3
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks, Davey. Unfortunately, the code didn't work.

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    What type of failure ?
    check this ....

    http://codingforums.daveyerwin.com/tate/

  • Users who have thanked DaveyErwin for this post:

    Tate (09-06-2013)

  • #5
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi again Davey... I apologize, I had a syntax error that "wasn't" flagged in my console, but I corrected the error and now it's working as it should. Thank you! Whew...

    Now I'm trying to figure out how to get the "One-time Investment amount" to display in the text area. For example, if $5000 is selected from the drop-down menu, the "Future Value of investment should display as $5000.

    This is how it should display:


    Future Value of $5000

    When compounded monthly:
    5414.9975340375495


    Any suggestions?

  • #6
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    Code:
     
    if ( $("display").checked) {
    message = "Future Value of '" + investment + "'\n\n"; 
    if ( $("monthly").checked )message += "When compounded monthly:\n "
    else message += "When compounded yearly: "
    message += futureValue;
    results.value = message;
    
    }

  • Users who have thanked DaveyErwin for this post:

    Tate (09-06-2013)

  • #7
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you! I'm going to keep working on the code. I need to display the investment as follows when checkbox for the "Display both monthly and yearly results in the text area" is checked:

    Future Value of $5000

    When compounded monthly: 5415
    When compounded yearly: 5400


    I hope I can figure it out??


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •