Javascript: Column total

[mrkh]

Hi all,

I've created a table and it works just fine when you insert values in the text field. When you insert "0" as a value it still works, problem is if you skip a text field and don't insert anything it returns "NaN" in the total column. I can't figure out what to change. Any help would be much apprecitated.

Also, and this would be a bonus, how do you insert a button to clear the entire field to start over if you wanted to without having to delete every entry.

Thanks,



HTML Code:

<table width="500" border="1" align="center">
        <tr bgcolor="#CCCCCC">
          <td width="340" style="font-weight: bold">Current Housing Expenses</td>
          <td width="144">&nbsp;</td>
        </tr>
        <tr>
          <td>Rent</td>
          <td><input type="text" onblur="calcTotal(this, 'tot')" /></td>
        </tr>
        <tr>
          <td>Utilities (if paid seperate)</td>
          <td><input type="text" onblur="calcTotal(this, 'tot')" /></td>
        </tr>
        <tr bgcolor="#CCCCCC">
          <td style="font-weight: bold">Current Non-Housing Expenses</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>Food</td>
          <td><input type="text" onblur="calcTotal(this, 'tot')" /></td>
        </tr>
        <tr>
          <td>Clothing</td>
          <td><input type="text" onblur="calcTotal(this, 'tot')" /></td>
        </tr>
        <tr>
          <td>Day Care / Tuition</td>
          <td><input type="text" onblur="calcTotal(this, 'tot')" /></td>
        </tr>
        <tr>
          <td style="font-weight: bold">Savings</td>
          <td><input type="text" onblur="calcTotal(this, 'tot')" /></td>
        </tr>
        <tr bgcolor="#CCCCCC">
          <td style="font-weight: bold">Total Monthly Expenses and Savings</td>
          <td><input type="text" id="tot" /></td>
        </tr>
      </table>

Javascript code:

<script type="text/javascript"> 
function calcTotal(txtBox, totBox) 
{ 
    var totVal; 
    try 
    {  
    totVal = document.getElementById(totBox).value; 
    if(totVal!= null && totVal!='') 
     { 
       document.getElementById(totBox).value= eval(parseInt(document.getElementById(totBox).value) + parseInt(txtBox.value));    
     } 
     else 
     { 
        document.getElementById(totBox).value= txtBox.value;            
     } 
    } 
    catch(e) 
    {} 
} 
</script>

[gits]

you just need to check and replace the empty val like this:

var yourVal = '';
 
if (yourVal === '') {
   yourVal = 0;
}
 
alert(parseInt(yourVal));
 

kin regards

[Amzul]

parseInt() cant convert text to a number.
i would check first that txtBox is an integer then i would sum it all

[gits]

exactly ... :) the problem is with the empty value ... because:

isNaN('')

returns false so you need to check that explicitly, in case you want to use the isNaN() method.

kind regards

[mrkh]

thanks for the reply gits, however I am very new to making websites actually I'm a student that just received my certifications. I have no problem with the content of the website and making the tables and etc., my problem is the javascript. Totally lost, based on your reply I don't know where to insert or replace my existing code.

Thanks,

[gits]

as you may see in the example you should check the value that you want to parse to an integer right before you want to use the parseInt() method, because in case you would try:

parseInt('');

you will get NaN as the result. so you need to check and replace the value that you want to parse before you use parseInt() ... ok?

kind regards