0

So I'm trying to make a Tax Calculator, to make it calculate the average tax and marginal tax. But I'm encountering some problems.

First my code:

<style>
  span{font-style:italic;}
  span{color:green;}
  table{border: 1px solid black;}
</style>

<script>
//decimal code
var calculated = false;
window.onload = function () {
    document.getElementById('dec').addEventListener('change', function () {
        if (calculated) calcul();});   
} //end of decimal code
function calcul() {
        //Taxable Income
        var TaxInc = parseFloat(document.getElementById("TaxInc").value);
        //Inkomen box 1
        var Income1 = parseFloat(document.getElementById("Income1").value);
        //Tax Box 1
        var box1 = parseFloat(document.getElementById("box1").value);
        //Linkergrens inkomen box 2
        var Income2 = parseFloat(document.getElementById("Income2").value);
        //Rechtergrens inkomen box 2
        var Income21 = parseFloat(document.getElementById("Income21").value);
        //Tax Box 2
        var box2 = parseFloat(document.getElementById("box2").value);
        //Inkomen box 3
        var Income3 = parseFloat(document.getElementById("Income3").value);
        //Tax Box 3
        var box3 = parseFloat(document.getElementById("box3").value);
        //Income 1 taxed
        var Inc1Taxed = TaxInc * box1;
        //Tax
        var Tax;
        if (TaxInc >= 0 && TaxInc <= Income1) {
            Tax = (Inc1Taxed)/100;
        }
        else if (TaxInc >= Income2 && TaxInc <= Income21) {
            Tax = (Inc1Taxed/100)+(((TaxInc - Income1)* box2)/100);
        }
        else (TaxInc >= Income3) {
            Tax = ((Inc1Taxed/100) + 
            (((TaxInc - Income1)* box2)/100) + 
            (((TaxInc + Income21 - Income2 - Income1)* box3)/100));
        }
        //decimal code
        var decs = +(document.getElementById('dec').value);
        calculated = true; //end of decimal code

        document.getElementById("answer").innerHTML = Tax.toFixed(decs);

       }
</script>

<form action="" id="nothing">
The Dutch Firm Herrera NV had
<input type="text" id="TaxInc" maxlength="10" size="10">
in taxable income. Using Table 3.3, what is the company's average tax rate? 
What is its marginal tax rate?<br />
<br />
<table>
    <tr>
        <td>
        <strong>Taxable income</strong>
        </td>
        <td>
        <strong>Tax percentage</strong>
        </td>
    </tr>

    <tr>
        <td>
        0 - 
        <input type="text" id="Income1" maxlength="5" size="5">
        </td>
        <td>
        <input type="text" id="box1" maxlength="5" size="5">
        </td>
    </tr>

    <tr>
        <td>
        <input type="text" id="Income2" maxlength="5" size="5"> - 
        <input type="text" id="Income21" maxlength="5" size="5">
        </td>
        <td>
        <input type="text" id="box2" maxlength="5" size="5">        
        </td>
    </tr>

    <tr>
        <td>
        <input type="text" id="Income3" maxlength="5" size="5">
          =>
        </td>
        <td>
        <input type="text" id="box3" maxlength="5" size="5">
        </td>
    </tr>
</table>
<br />
<br />
    <input type="button" value="Calculate" id="but" onclick="calcul()" />
<br />
<br />
</form>
<br />
<br />
The answer is <span id="answer">XXX</span>
<br />
<br />
    <br />
    Select the amount of decimals <select id="dec">
      <option value="0">0 decimals</option>
      <option value="1">1 decimal</option>
      <option value="2">2 decimals</option>
      <option value="3">3 decimals</option>
      <option value="4">4 decimals</option>
      <option value="5">5 decimals</option>
      <option value="6">6 decimals</option>
    </select>
    <br />

What are my intentions? First, users should input their taxable income in the following rule:

The Dutch Firm Herrera NV had
<input type="text" id="TaxInc" maxlength="10" size="10">
in taxable income.
I've tried to run in it jsFiddle, which is a very handy website.

Then they need to give the range of the income tax 'boxes' in the table. So the first one could be 0 - 10000, the second 10000 - 25000 and the third 25000 ->. In the column next to it, they need to give the tax rate/percentage.

Since I want to try it as dynamically as possible, the formula of the taxrates should be 'dynamic' as well. That's why I used the If...., else if ...., else statement, to specify the range. If the income exceeds the amount in the If statement, it will look to the else if statement.

The (not so) funny thing is, when I only insert the formula for the first two statements (If and else If), it works flawlessly. But as soon as the third formula appears, the calculate button is broken. I've looked at the formula over and over it, but in my opinion, there doesn't seem to be a mistake in it.

Since I'm using this code in Google Sites, the built in editor returned an error back to me, to put a semicolon in the following rule: else (TaxInc >= Income3) {

But if I do that, it will cut the rest of the code off and the code definitely won't work. I think there is an error in the third 'else' statement, but what I can't find out.

And for the marginal taxrate: the marginal tax rate is the tax rate needed when the taxable income raises with one euro. A simple thought would be to just add +1 by TaxInc, but that way, I have to copy the If-statements over and change all the TaxInc to TaxInc+ for example. Is there a 'shorter/simpler' way too it? (I only have basic javascript and html knowledge).

4

0 回答 0