No calculation display while using on focus on button click.

  • (2 Pages)
  • +
  • 1
  • 2

24 Replies - 940 Views - Last Post: 25 February 2016 - 12:32 AM

#1 Nitewalkr  Icon User is offline

  • D.I.C Lover

Reputation: 149
  • View blog
  • Posts: 1,045
  • Joined: 17-November 10

No calculation display while using on focus on button click.

Posted 20 February 2016 - 10:41 AM

It is my first time using the stackoverflow I have been a long time drifter here and finally got the courage to join in and get some help / critiques to enhance my coding skills.

I am currently stuck on this for two days and I can not seem to figure out what happened.

The way this code setup works is it validates text fields on blur, (which it does.)

On the first and second fieldset the user is asked to input:

gross income
check boxes male/female
If male income tax = gross_income*0.19 else female income tax = gross_income*0.17.

Add that up to the percentage you get per dependencies after 2 dependencies. Plus cpp and ei will give me the total deductions.(WIP)

The problem occurs as follows:

The value will add up for cpp and ei and show in alert but it will show undefined in the total dependencies.

In the second fieldset where I am calculating the total grace.

It would show as not a number in alert and place a value as undefined text box.

The total suppose to show up after clicking the button but it just blinks the total net income that says, undefined.

I would appreciate the help.

Thanks.

/*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;*/



This is the HTML that I am using to work this out with.

<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>

This post has been edited by Nitewalkr: 20 February 2016 - 10:42 PM


Is This A Good Question/Topic? 0
  • +

Replies To: No calculation display while using on focus on button click.

#2 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6375
  • View blog
  • Posts: 25,756
  • Joined: 12-December 12

Re: No calculation display while using on focus on button click.

Posted 20 February 2016 - 10:47 AM

The OP is referring to his SO question here, to save confusion.
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6375
  • View blog
  • Posts: 25,756
  • Joined: 12-December 12

Re: No calculation display while using on focus on button click.

Posted 20 February 2016 - 10:57 AM

Just on glancing through your code I spotted this:
    /*validate grace*/
    function validate_bonus(BONUS)
    {
        this.BONUS = bonus;

Presumably this should be this.BONUS = BONUS; that is, the value you passed as an argument. 'bonus' would be 'undefined' and this value will promulgate through your code.

Check your browser's console for errors as well.
Was This Post Helpful? 0
  • +
  • -

#4 Nitewalkr  Icon User is offline

  • D.I.C Lover

Reputation: 149
  • View blog
  • Posts: 1,045
  • Joined: 17-November 10

Re: No calculation display while using on focus on button click.

Posted 20 February 2016 - 11:09 AM

Thank you for the link. I posted here because I can not discuss it there. That place is strictly for asking questions and getting quick answers.

This place however; You do get a fair amount of critique about your code should you decide to discuss it.
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6375
  • View blog
  • Posts: 25,756
  • Joined: 12-December 12

Re: No calculation display while using on focus on button click.

Posted 20 February 2016 - 11:10 AM

In that vein, I will also mention that your page is missing the required DOCTYPE declaration.
Was This Post Helpful? 0
  • +
  • -

#6 Nitewalkr  Icon User is offline

  • D.I.C Lover

Reputation: 149
  • View blog
  • Posts: 1,045
  • Joined: 17-November 10

Re: No calculation display while using on focus on button click.

Posted 20 February 2016 - 11:23 AM

Is that necessary when you are just working on display and calculations only and html5 is irrelevant at the moment?

Because I am just calling functions at the moment.
Was This Post Helpful? 0
  • +
  • -

#7 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6375
  • View blog
  • Posts: 25,756
  • Joined: 12-December 12

Re: No calculation display while using on focus on button click.

Posted 20 February 2016 - 11:29 AM

It is required and you are gaining nothing by omitting it; without it your page might display incorrectly ("..just working on display..") and you might acquire the habit of omitting it.
Was This Post Helpful? 1
  • +
  • -

#8 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6375
  • View blog
  • Posts: 25,756
  • Joined: 12-December 12

Re: No calculation display while using on focus on button click.

Posted 20 February 2016 - 11:49 AM

Not sure if you missed my post #3.
Was This Post Helpful? 0
  • +
  • -

#9 Nitewalkr  Icon User is offline

  • D.I.C Lover

Reputation: 149
  • View blog
  • Posts: 1,045
  • Joined: 17-November 10

Re: No calculation display while using on focus on button click.

Posted 20 February 2016 - 11:53 AM

did as per your instructions:

Same issues:

- total grace is displaying NaN on alert and undefined in the text field.
- total deduction is displaying (sum of cpp and ei) on alert and undefined in the text field.

-net income blinks undefined upon the button click and in console it blinks the error when you click the button.

perhaps I am doing this entirely wrong.

for one I should've made only one function for validation that can be assigned to on blur for everything since all of them are numbers.

one function for check box one to calculate the grace and display on focus, the other to calculate the deductions on focus and calculate total net income on button click.

EDIT: No, I did not miss your third post. I did fix that (although I dont know what was I trying to do but I do agree the correct format is such as you posted.)

I placed the doctype html that as well. I will update my code here.

This post has been edited by Nitewalkr: 20 February 2016 - 11:59 AM

Was This Post Helpful? 0
  • +
  • -

#10 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6375
  • View blog
  • Posts: 25,756
  • Joined: 12-December 12

Re: No calculation display while using on focus on button click.

Posted 20 February 2016 - 12:03 PM

Quote

The value will add up for cpp and ei and show in alert but it will show undefined in the total dependencies.

Once you've posted your updated code you should also indicate which line(s) someone should be looking at. This obviously helps if you are posting several hundred lines of code.
Was This Post Helpful? 0
  • +
  • -

#11 Nitewalkr  Icon User is offline

  • D.I.C Lover

Reputation: 149
  • View blog
  • Posts: 1,045
  • Joined: 17-November 10

Re: No calculation display while using on focus on button click.

Posted 20 February 2016 - 12:44 PM

From line: 102 to 180.
Was This Post Helpful? 0
  • +
  • -

#12 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6375
  • View blog
  • Posts: 25,756
  • Joined: 12-December 12

Re: No calculation display while using on focus on button click.

Posted 20 February 2016 - 01:51 PM

Do NOT alter your original post, it breaks the flow of the thread. Post your updated code as a new response.

If possible, reinstate your original code in your first post, without altering anything else.
Was This Post Helpful? 0
  • +
  • -

#13 Nitewalkr  Icon User is offline

  • D.I.C Lover

Reputation: 149
  • View blog
  • Posts: 1,045
  • Joined: 17-November 10

Re: No calculation display while using on focus on button click.

Posted 20 February 2016 - 04:17 PM

Sorry about that. I will see if i can copy paste the original post from SO and post the updated one as a new post.

The reason I updated the original is because I saw one of the admins editing the user post because he quoted a wall of text and he was warned not to post as such. I thought it was the same idea here.

At this point I am feeling lost so i may have to re do the entire js.

Edit: the only thing i changed was the the local variables from upper case to lower.

This post has been edited by Nitewalkr: 20 February 2016 - 04:22 PM

Was This Post Helpful? 0
  • +
  • -

#14 Nitewalkr  Icon User is offline

  • D.I.C Lover

Reputation: 149
  • View blog
  • Posts: 1,045
  • Joined: 17-November 10

Re: No calculation display while using on focus on button click.

Posted 20 February 2016 - 10:45 PM

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;

/*
validate the filds:

create the function for the first field set, initialize and validate it
when you figure it out, you will have to apply the same to the next one.
*/
//input and validation.

/*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();
	}
	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")num_depend	return num = parseFloat(num);
	}
	
}
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/
/*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();
}
/*-----------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------*/


html code is same only with doctype:

<!DOCTYPE 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(totGrace)"></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(totDeduct)"></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>


Was This Post Helpful? 0
  • +
  • -

#15 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1828
  • View blog
  • Posts: 5,755
  • Joined: 15-January 14

Re: No calculation display while using on focus on button click.

Posted 22 February 2016 - 10:36 AM

There are several issues.

With this line:

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

You're calling the tot_grace function, but you aren't passing it a value. According to the function definition it expects a value:

function tot_grace(tot_grace)

I would not use the same name for the function and a parameter. I don't know what is going to happen there, but it's ambiguous.

On this line:
tot_grace = validate_depend(num_depend) + validate_bonus(bonus) + validate_ca(con_all);

First, are you passing global variables to those functions? I don't see where you're setting those variables before that line executes, is it necessary to pass anything? Because in those functions you do something like this:

function validate_depend(num_depend)
{
	this.num_depend = num_depend;
	num_depend = document.getElementById("Depend").value;

It doesn't really make sense to me why you're saving something in this.num_depend, that doesn't really do anything. Then you immediately overwrite num_depend with a value from a field, so why do you pass a value to the function in the first place? Then, in all of your validation functions you have a series of if/else statements but you only return a value in some of those, in other cases the function won't return a value. That's going to result in an undefined value that you're trying to add up, which is why you get NaN.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2