Web Analytics Made Easy -
StatCounter Calling a function within a function - CodingForum

Announcement

Collapse
No announcement yet.

Calling a function within a function

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Calling a function within a function

    I am creating a web page that displays a person's income tax. The person's income and itemized deductions are entered into text boxes, with a button to calculate the tax. When the button is clicked, a function is called to access the income and itemized deduction amounts, call another function (the IncomeTax function), and display the calculated tax in another text box. I have spent all day working on this thing can't figure out if my error is in one of my functions or if I have an error in the body. Or have I made so many changes I just need to start over from scratch?

    Code:
    <html>
       
    <head>
       <title>Income Tax Calculator</title>
       <script type="text/javascript">
          function IncomeTax(income, itemized)
          // Assumes: income >= 0, itemized >= 0
          // Returns: flat tax (13%) due after deductions
          {
             var deduction, taxableIncome, totalTax;
    
             deduction = Math.max(itemized, 4150);
             taxableIncome = Math.max(income - deduction, 0);
             totalTax = 0.13*taxableIncome
    
             return totalTax;
          }
          function Compute()
          // Assumes: incomeBox and deductionBox contain dollar amounts
          // Returns: assigns the total tax amount to taxBox
          {
             var income, itemized;
    
             income = parseFloat(document.getElementById('incomeBox').value);
             income = parseFloat(income);
             deduction = parseFloat(document.getElementById('itemizedBox').value);
             deduction = parseFloat(deduction);
    
             totalTax = IncomeTax(income, itemized);
    
             document.getElementById('taxBox').value = totalTax;
          }
       </script>
    </head>
    
    <body>
       <h2>Income Tax Calculator</h2>
       <hr />
       <p>
       Income Amount: <input type="text" id="incomeBox" size="10" value="" />
       Itemized Deductions: <input type="text" id="itemizedBox" size="10" value="" />
       </p>
       <p>
       <input type="button" value="Click to Calulate Income Tax" onclick="Compute();" />
       </p>
       <p>
       Income Tax Amount: <input type="text" "id=taxBox" size="10" value="" />
       </p>
    </body>
    </html>

  • #2
    Hey welcome to the forum.

    // Assumes: income >= 0, itemized >= 0
    This is bad, mkay? Probably want to handle that in some way.

    Code:
    Income Tax Amount: <input type="text" [b]"id=taxBox"[/b] size="10" value="" />
    There's one problem. Simple markup typo.

    The other stems from a simple variable name issue, i.e.
    Code:
      var income, [b]itemized[/b];
    
      income = parseFloat(document.getElementById('incomeBox').value);
      income = parseFloat(income);
      [b]deduction[/b] = parseFloat(document.getElementById('itemizedBox').value);
      [b]deduction[/b] = parseFloat(deduction);
    
      totalTax = IncomeTax(income, [b]itemized[/b]);
    See what you've done there? It's also unnecessary to call parseFloat() twice.

    After those two big issues are fixed, the script seems to work fine. You should look at making sure the output is formatted properly, and I'd be sure to clean up that "assume" part, but otherwise it works.

    Oh, little things like this bug me as well:
    Code:
    taxableIncome = Math.max(income - deduction, 0);
    I would suggest doing
    Code:
    taxableIncome = Math.max( [b]([/b] income - deduction [b])[/b], 0);
    I also can't suggest strongly enough that you develop using Firefox with Firebug or at the very least with the error console. I spotted the first error easily with just the error console output, and the second wasn't hard to find once the script started spitting out NaN values. Use alert() here and there in your script at "pseudo breakpoints" to root out problems. Firebug is an excellent tool once you get the hang of it.
    Last edited by bdl; Apr 10, 2009, 09:57 PM.

    Comment


    • #3
      As bdl says,

      // Assumes: income >= 0, itemized >= 0

      Assume will make an *** of u and me.

      You must verify that the input values are numbers (not strings) within the valid range (>0).

      Code:
      income = parseFloat(document.getElementById('incomeBox').value);
      if ((isNaN(income)) || (income < 0)  || (income = "")) {
      alert ("You must enter a positive number for income");
      return false;
      }
      You will probably wish to show the tax amount to two decimal places only:-

      document.getElementById('taxBox').value = totalTax.toFixed(2);

      All the code given in this post has been tested and is intended to address the question asked.
      Unless stated otherwise it is not just a demonstration.

      Comment


      • #4
        @Philip M> Nice!

        Comment

        Working...
        X