onfocus 不工作 javascript html；不显示计算 onfocus 和按钮点击答案

【问题标题】：onfocus is not working javascript html; does not display calculate onfocus and on button clickonfocus 不工作 javascript html；不显示计算 onfocus 和按钮点击
【发布时间】：2016-02-20 19:47:56
【问题描述】：

这是我第一次使用 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>

【问题讨论】：

就 SO 提出问题时，您需要记住人们会在业余时间回答这些问题。如果您的问题难以阅读，那么愿意帮助的人放弃的可能性就会增加。我已经花了大约 15 分钟试图理解你的问题，特别是因为没有格式的文本不容易阅读。我仍然不明白你在问什么。我还查看了您的代码，但我没有看到 gross_income*0.19 发生的地方，也没有检查所选性别的地方。
抱歉；我仍在努力，这就是为什么我仍然很难让人们了解正在发生的事情。但即使我没有使用 Gross_income*19（这取决于您是否选中了男性或女性的复选框；男性为 Gross_income*17；女性为 Gross_income*19），我仍然会在总宽限总扣除额中获得一些价值总净额。我唯一得到的是恩典：警报中的 NaN，文本框中未定义。在警报中扣除（数字总和），在文本框中未定义。当我点击计算按钮时，总净收入只是闪烁未定义。

标签： javascript html

【解决方案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;
    }

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

【讨论】：