onfocus無法正常工作javascript html;不顯示計算onfocus和點擊按鈕

這是我第一次使用stackoverflow我已經很長時間漂流在這裏，並最終有勇氣加入並獲得一些幫助/批評，以提高我的編碼技能。onfocus無法正常工作javascript html;不顯示計算onfocus和點擊按鈕

我目前被困在這兩天，我似乎無法弄清楚發生了什麼事。

這段代碼設置的工作方式是它證明了在模糊文本字段，（它確實。）

在第一和第二個字段集，用戶被要求輸入：

總收入
複選框男/女

如果男性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>

來源

2016-02-20 Nitewalkr

在提問時，你需要記住人們回答這些問題在業餘時間。如果你的問題很難理解，那麼願意幫助的人放棄的概率就會增加。我已經花了大約15分鐘試圖瞭解您的問題，尤其是因爲沒有格式化，文本不容易閱讀。我仍然不明白你在問什麼。我也看了你的代碼，但是我沒有看到'gross_income * 0.19'發生的地方，也沒有檢查選擇的性別。 –

對不起，我仍然在努力，這就是爲什麼我仍然很難讓人明白髮生了什麼。但即使我沒有使用gross_income * 19（這取決於您是否選中男性或女性的複選框;男性的gross_income * 17;女性的gross_income * 19），我仍然會在總寬限總扣除中獲得一些價值總淨額。我得到的唯一的東西是恩典：NaN處於警戒狀態，未定義在文本框中。在警報中扣除（數字的總和），並在文本框中未定義。當我單擊計算按鈕時，net_income的總數只是閃爍未定義。 – Nitewalkr

更改display_net()功能在你的JavaScript來

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

如果我明白你的問題，這是你需要什麼

來源

2016-02-20 11:47:56 Munawir

onfocus無法正常工作javascript html;不顯示計算onfocus和點擊按鈕

回答

相關問題