Question

这是我第一次使用stackoverflow，我在这里度过了很长一段时间，终于有勇气加入并获得一些帮助/批评，以提高我的编码技能。

我目前被困在这两天，我似乎无法弄清楚发生了什么。

此代码设置的工作方式是验证模糊的文本字段（它确实如此。）

在第一个和第二个字段集上，要求用户输入：

总收入
复选框男/女

如果男性 income tax = gross_income*0.19其他女性 income tax = gross_income*0.17。

在2个依赖项之后，将其添加到每个依赖项获得的百分比。加上 cpp 和 ei 会给我扣除总额。（WIP）

问题如下：

该值将加起来为 cpp 和 ei 并显示在警报中，但它会在总依赖项中显示undefined。

在我计算总宽限的第二个字段集中。

它会显示为警报中的数字，并将值设置为undefined文本框。

总计假设在点击按钮后显示，但它只是闪烁显示的总净收入undefined。

我很感激帮助。

感谢。

编辑：如果有人能建议我更好地实施和验证复选框，我也将不胜感激。

/*convert gender dependencies income tax: based on the gender 

    -> Total Deductions
    if gender is male: 19% income tax will be deducted, if female: 17% will be deducted.
    CPP: is 6% of the total gross_income and EI: is 9% of the total gross_income Union Dues: 2% of the total gross_income
    -> Total Grace
    if number of dependencies are 3, 2% of total gross_income will be added, if 4, 4% of total gross_income will be added.
    Bonus: $150, and conveyance_allowance: $ 100.
    */


    var gross_income, 
        //gender = {genM: gross_income*0.19 , genF: gross_income*0.17}, 
        num_depend;
        //income_tax;

    var bonus, con_all;

    var CPP, EI;

    var tot_deduct, tot_grace, net_income;


    /*validating gross income*/



    function validate_gross(GROSS_INCOME)
    {
        this.GROSS_INCOME = gross_income;
        GROSS_INCOME = document.getElementById("GrossInput").value;
        //gross_income = parseFloat(gross_income);

         if(isNaN(GROSS_INCOME)) 
        {
            alert("ERROR: PLEASE ENTER A VALUE IN NUMBERS");
            document.getElementById("GrossInput").value = "";
            document.getElementById("GrossInput").focus();
        }
        else if(GROSS_INCOME == null || GROSS_INCOME == "") 
        { 
            alert("ERROR: GROSS INCOME FIELD IS EMPTY");
            document.getElementById("GrossInput").value = "";
            document.getElementById("GrossInput").focus();
        }
        else if(GROSS_INCOME <= "0")    
        { 
            alert("ERROR: GROSS INCOME MUST BE GREATER THAN ZERO"); 
            document.getElementById("GrossInput").value = "";
            document.getElementById("GrossInput").focus();
        }

        else 
        {   
            // alert("VALIDATED");
            return GROSS_INCOME = parseFloat(GROSS_INCOME);
        }
    }

    /*function validate gender()
    {
        //TO DO: enter your code here; Figure out how to validate the gender.
    }*/

    /*validate number of dependencies*/
    function validate_depend(NUM_DEPEND)
    {
        this.NUM_DEPEND = num_depend;
        NUM_DEPEND = document.getElementById("Depend").value;
        //gross_income = parseFloat(gross_income);

         if(isNaN(NUM_DEPEND) || NUM_DEPEND < "0") 
        {
            alert("ERROR: INVALID ENTRY");
            document.getElementById("Depend").value = "";
            document.getElementById("Depend").focus();
        }
        else if(NUM_DEPEND == null || NUM_DEPEND== "")  
        { 
            alert("ERROR: DEPENDANCE FIELD IS EMPTY");
            document.getElementById("Depend").value = "";
            document.getElementById("Depend").focus();
        }
        else if(NUM_DEPEND == "3")
        {   
            // alert("VALIDATED: gross_income * 0.02");

            return NUM_DEPEND = gross_income*0.02; parseFloat(NUM_DEPEND);
        }
        else if(NUM_DEPEND == "4")
        {
            // alert("VALIDATED: gross_income * 0.04");

            return NUM_DEPEND = gross_income*0.04; parseFloat(NUM_DEPEND);
        }
        else
        { 
            // alert("VALIDATED");
            return NUM_DEPEND = parseFloat(NUM_DEPEND);
        }

    }
    /*-----------------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------*/
    /*validate grace*/
    function validate_bonus(BONUS)
    {
        this.BONUS = bonus;

        BONUS = document.getElementById("Bonus").value;
        BONUS = parseFloat(BONUS);

        //validate bonus
        if(isNaN(BONUS))
        {
            alert("ERROR: NUMBER VALUES ONLY");
            document.getElementById("Bonus").value = "";
            document.getElementById("Bonus").focus();
        }
        else if(BONUS == null || BONUS == "")
        {
            alert("ERROR: BONUS FIELD IS EMPTY");
            document.getElementById("Bonus").value = "";
            document.getElementById("Bonus").focus();
        }
        else if(BONUS < 0)
        {
            alert("ERROR: BONUS CAN BE EITHER ZERO OR GREATER THAN ZERO");
            document.getElementById("Bonus").value = "";
            document.getElementById("Bonus").focus();
        }
        else
        {
            // alert("VALIDATED");
            return BONUS;parseFloat(BONUS);
        }
    }


    //validate con_all
    function validate_ca(CON_ALL)
    {
        this.CON_ALL = con_all;

        CON_ALL = document.getElementById("CA").value;
        CON_ALL = parseFloat(CON_ALL);

        if(isNaN(CON_ALL))
        {
            alert("ERROR: NUMBER VALUES ONLY");
            document.getElementById("CA").value = "";
            document.getElementById("CA").focus();
        }
        else if(CON_ALL == null || CON_ALL == "")
        {
            alert("ERROR: CONVEYANCE ALLOWANCE FIELD IS EMPTY");
            document.getElementById("CA").value = "";
            document.getElementById("CA").focus();
        }
        else if(CON_ALL < 0)
        {
            alert("ERROR: CONVEYANCE ALLOWANCE CAN BE EITHER ZERO OR GREATER THAN ZERO");
            document.getElementById("CA").value = "";
            document.getElementById("CA").focus();
        }
        else
        {
            // alert("VALIDATED");
            return CON_ALL;parseFloat(CON_ALL);

        }
    }

    function tot_grace(TOT_GRACE)
    {   
        this.TOT_GRACE = tot_grace;
        TOT_GRACE = validate_depend(num_depend) + validate_bonus(bonus) + validate_ca(con_all);
        TOT_GRACE = parseFloat(TOT_GRACE);
        return alert(TOT_GRACE);

    }
    function display_grace()
    {
        document.getElementById("totGrace").value = tot_grace();    
    }
    /*-----------------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------*/

    /*deductions*/
    function validate_CPP(CPP)
    {
        this.CPP = CPP;

        CPP= document.getElementById("CPP").value;
        CPP = parseFloat(CPP);

        //validate deductions
        if(isNaN(CPP))
        {
            alert("ERROR: NUMBER VALUES ONLY");
            document.getElementById("CPP").value = "";
            document.getElementById("CPP").focus();
        }
        else if(CPP == null || CPP == "")
        {
            alert("ERROR: CPP FIELD IS EMPTY");
            document.getElementById("CPP").value = "";
            document.getElementById("CPP").focus();
        }
        else if(CPP < 0)
        {
            alert("ERROR: CPP CAN BE EITHER ZERO OR GREATER THAN ZERO");
            document.getElementById("CPP").value = "";
            document.getElementById("CPP").focus();
        }
        else
        {
            // alert("VALIDATED");
            return CPP;parseFloat(CPP);
        }
    }

    //validate con_all
    function validate_EI(EI)
    {
        this.EI = EI;

        EI = document.getElementById("EI").value;
        EI = parseFloat(EI);

        if(isNaN(EI))
        {
            alert("ERROR: NUMBER VALUES ONLY");
            document.getElementById("EI").value = "";
            document.getElementById("EI").focus();
        }
        else if(EI == null || EI == "")
        {
            alert("ERROR: CONVEYANCE ALLOWANCE FIELD IS EMPTY");
            document.getElementById("EI").value = "";
            document.getElementById("EI").focus();
        }
        else if(EI < 0)
        {
            alert("ERROR: CONVEYANCE ALLOWANCE CAN BE EITHER ZERO OR GREATER THAN ZERO");
            document.getElementById("EI").value = "";
            document.getElementById("EI").focus();
        }
        else
        {
            // alert("VALIDATED");
            return EI;parseFloat(EI);

        }
    }

    function tot_deduct(TOT_DEDUCT)
    {   
        this.TOT_DEDUCT = tot_deduct;
        TOT_DEDUCT = validate_CPP(CPP) + validate_EI(EI);//add income tax as well.
        TOT_DEDUCT = parseFloat(TOT_DEDUCT);
        return alert(TOT_DEDUCT);

    }
    function display_deduct()
    {
        document.getElementById("totDeduct").value = tot_deduct();
    }
    /*-----------------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------*/
    function display_net()
    {
        document.getElementById("totNet").value = net_income;
    }
    /*tot_deduct = income_tax + deduct.cpp + deduct.ei;
    net_income = gross_income - tot_deduct + tot_grace;*/

用于此的HTML如下：

<html>
<head><title>Calculating Net Income</title></head>
<link href = "../css/net_income.css" type = "type/css" rel = "stylesheet"/>
<body>
<!--Since it is only one HTML document:
    It has one flow, so HTML before Java script-->
<div id ="divstyle">
        <form><h1>NET INCOME</h1>
            <!--Fieldset1-->
            <fieldset>
                <legend>GROSS INCOME</legend>
                <label><b>Gross Income:</b><input type = "text" id = "GrossInput" onblur = "validate_gross(GrossInput)"></label>

                <label><b>Gender: Male:</b><input type = "checkbox" id = "Gender_Male"><b>Female:</b><input type = "checkbox" id = "Gender_Female"></label>

                <label><b>Dependencies:</b><input type = "text" id = "Depend" onblur = "validate_depend(Depend)"></label>       
            </fieldset>

            <fieldset>
                <legend>GRACE</legend>
                <label><b>Grace:Bonus:</b><input type = "text" id = "Bonus" onblur = "validate_bonus(Bonus)"><b>CA:</b><input type = "text" id = "CA" onblur = "validate_ca(CA)"></label><br/>
                <label><b>total Grace:</b><input type = "text" id = "totGrace" onfocus = "display_grace()"></label>
            </fieldset>

            <fieldset>
                <legend>DEDUCTIONS</legend>
                <label><b>Deductions:CPP:</b><input type = "text" id = "CPP" onblur = "validate_CPP(CPP)"><b>EI:</b><input type = "text" id = "EI" onblur = "validate_EI(EI)"></label><br/>
                <label><b>Total Deductions:</b><input type = "text" id = "totDeduct" onfocus = "display_deduct()"></label>
            </fieldset>
            <br/>

        <button id = "Calc_btn" onclick = "display_net(Calc_btn)">CALCULATE</button><br/><br/>
        <label><b>Net Income:</b><input type = "text" id = "totNet" ></label><br/>
    </form>
</div>
</body>
<!--<script type = "text/javascript" src ="../js/net_income.js"></script>-->
<script type = "text/javascript" src ="../js/OOP_Improved_Assignment7.js"></script>
</html>

Answer 1

将javascript中的display_net()功能更改为

/* HERE GOES YOUR OTHER CODES TO VALIDATE THE INPUT FIELD etc...*/    

function display_net() {
        var income_tax;
        var gross_income = parseInt(document.getElementById("GrossInput").value);
        var dependencies = parseInt(document.getElementById("Depend").value);
        if (dependencies > 2) {
            var depend = dependencies-2;
            var perc_per_depend = gross_income*0.02;
            var total_perc = depend*perc_per_depend;
        }
        var bonus = 150;        //As in your comment $150
        var ca = 100            //As in your comment $100
        if (document.getElementById('g1').checked) {
            income_tax = gross_income*0.19;
        }
        else if (document.getElementById('g2').checked) {
            income_tax = gross_income*0.17;
        }
        var cpp = gross_income*0.06;
        var ei = gross_income*0.09;


        document.getElementById("Bonus").value = bonus;
        document.getElementById("CA").value = ca;

        var tot_grace = total_perc + bonus + ca;

        document.getElementById("totGrace").value = tot_grace;

        document.getElementById("CPP").value = cpp;
        document.getElementById("EI").value = ei;

        var tot_deduct = cpp + ei;

        document.getElementById("totDeduct").value = tot_deduct;

        document.getElementById("totNet").value = (gross_income + tot_grace) - tot_deduct;
    }

如果我理解你的问题，这就是你需要的

onfocus不工作javascript html;不显示计算onfocus和按钮单击

1 个答案: