Question

我使用文本字段和函数创建了一个税计算器，该计算器将根据收入所属的括号计算出税额，并根据前几年的税制显示您节省的税额。下面我有一个工作的计算器。文本字段将提供所获得的收入。我在两个变量taxBrackets，taxBracketsOld中有当前税种和先前税种。根据收入的税级计算并存储在calcTaxAmountOld，calcTaxAmount中。然后计算出差异并将其呈现给具有id结果的div。

如何改善下面的代码以使其更有效和可重用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<input id="taxableamount" type="number" min="1" max="10000000000000" onchange="readTaxIncome()" placeholder="What is your taxable Income? "></p>
<div id="results">

</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script>
    var taxBrackets = {
        "< 250000": { "min":0, "max": 250000, "per": 0 },
        "< 500000": { "min":250001, "max": 500000, "per": 5 },
        "< 1000000": { "min":500001, "max": 1000000, "per": 20 },
        "> 1000000": { "min":1000001, "max": "max", "per": 30 },
    };

    var taxBracketsOld = {
        "< 250000": { "min":0, "max": 250000, "per": 0 },
        "< 500000": { "min":250001, "max": 500000, "per": 10 },
        "< 1000000": { "min":500001, "max": 1000000, "per": 20 },
        "> 1000000": { "min":1000001, "max": "max", "per": 30 },
    };

    function readTaxIncome(){
        var taxableAmount = parseInt(document.getElementById('taxableamount').value);
        // console.log("taxableAmount", taxableAmount);
        calculateTaxAmount(taxableAmount)    
    }

    function calculateTaxAmount(taxableIncome){

        console.log("passedtotaxableIncome", taxableIncome >= taxBrackets['< 500000']['min']);

        var calcTaxAmountOld, calcTaxAmount, finalTaxAmountOld, finalTaxAmount;

        var element = document.getElementById('results');

        if(taxableIncome <= taxBrackets['< 250000']['max'] ){
            console.log("Test0");
            calcTaxAmountOld = 0;
            calcTaxAmount = 0;

        }else if(taxableIncome >= taxBrackets['< 500000']['min'] && taxableIncome <= taxBrackets['< 500000']['max']){
            console.log("Test1");
            calcTaxAmountOld = (taxableIncome - 250000) * taxBracketsOld['< 500000']['per']/100;
            calcTaxAmount = (taxableIncome - 250000) * taxBrackets['< 500000']['per']/100;


        }else if(taxableIncome >=  taxBrackets['< 1000000']['min'] && taxableIncome <= taxBrackets['< 1000000']['max']){

            console.log("Test2");
            calcTaxAmountOld = (taxableIncome-500000) * taxBracketsOld['< 1000000']['per']/100 + 12500;
            calcTaxAmount = (taxableIncome-500000) * taxBrackets['< 1000000']['per']/100 + 12500;



        }else if(taxableIncome >=  taxBrackets['> 1000000']['min'] ){
            console.log("Test3");
            calcTaxAmountOld = (taxableIncome-1000000) * taxBracketsOld['> 1000000']['per']/100 + 112500;
            calcTaxAmount = (taxableIncome-1000000) * taxBrackets['> 1000000']['per']/100 + 112500;

        }

        // console.log("calcTaxAmount", calcTaxAmount);

        finalTaxAmount = calcTaxAmount + (calcTaxAmount * 4/100)
        finalTaxAmountOld = calcTaxAmountOld + (calcTaxAmountOld * 4/100)

        element.innerHTML = "Your Final Tax Amount for 2019 is " + Math.round(finalTaxAmount) + ". And you save exactly " + (calcTaxAmountOld - calcTaxAmount);
        console.log("finalTaxAmount", Math.round(finalTaxAmount));



    }




</script>
</body>
</html>

如何改善我的税金计算器代码以提高效率和可重用性

0 个答案: