Help with JavaScript

[jellybeannn]

Hi I've got the JavaScript that calculates the amount of two TextBox's(rate_## and area_##) and displayes it in a label(amount_##), what I'm trying to do is to add up all of the amounts and display it in another label(estimatedCost), I've tried this with the first function but the estimatedCost label displays NaN.

<script type="text/javascript"> 
    var estimatedCost;
 
     function Amount01() {  
         var val1 = document.getElementById('area_01').value;  
         var val2 = document.getElementById('rate_01').value;  
   
         if (val1 != '' && val2 != '')
            estimatedCost += val1 * val2;
             document.getElementById('amount_01').innerHTML = val1 * val2; 
             document.getElementById('estimateCost').innerHTML = estimatedCost;
     }  
     
     function Amount02() {  
         var val1 = document.getElementById('area_02').value;  
         var val2 = document.getElementById('rate_02').value;  
   
         if (val1 != '' && val2 != '')  
             document.getElementById('amount_02').innerHTML = val1 * val2;  
     }  
     
     function Amount03() {  
         var val1 = document.getElementById('area_03').value;  
         var val2 = document.getElementById('rate_03').value;  
   
         if (val1 != '' && val2 != '')  
             document.getElementById('amount_03').innerHTML = val1 * val2;  
     }  
     
     function Amount04() {  
         var val1 = document.getElementById('area_04').value;  
         var val2 = document.getElementById('rate_04').value;  
   
         if (val1 != '' && val2 != '')  
             document.getElementById('amount_04').innerHTML = val1 * val2;  
     }  
     
     function Amount05() {  
         var val1 = document.getElementById('area_05').value;  
         var val2 = document.getElementById('rate_05').value;  
   
         if (val1 != '' && val2 != '')  
             document.getElementById('amount_05').innerHTML = val1 * val2;  
     }  
     
     function Amount06() {  
         var val1 = document.getElementById('area_06').value;  
         var val2 = document.getElementById('rate_06').value;  
   
         if (val1 != '' && val2 != '')  
             document.getElementById('amount_06').innerHTML = val1 * val2;  
     }  
     
     function Amount07() {  
         var val1 = document.getElementById('area_07').value;  
         var val2 = document.getElementById('rate_07').value;  
   
         if (val1 != '' && val2 != '')  
             document.getElementById('amount_07').innerHTML = val1 * val2;  
     }  
     
     function Amount08() {  
         var val1 = document.getElementById('area_08').value;  
         var val2 = document.getElementById('rate_08').value;  
   
         if (val1 != '' && val2 != '')  
             document.getElementById('amount_08').innerHTML = val1 * val2;  
     }  
     
     function Amount09() {  
         var val1 = document.getElementById('area_09').value;  
         var val2 = document.getElementById('rate_09').value;  
   
         if (val1 != '' && val2 != '')  
             document.getElementById('amount_09').innerHTML = val1 * val2;  
     }  
     
     function Amount10() {  
         var val1 = document.getElementById('area_10').value;  
         var val2 = document.getElementById('rate_10').value;  
   
         if (val1 != '' && val2 != '')  
             document.getElementById('amount_10').innerHTML = val1 * val2;  
     }  
     
     function Amount11() {  
         var val1 = document.getElementById('area_11').value;  
         var val2 = document.getElementById('rate_11').value;  
   
         if (val1 != '' && val2 != '')  
             document.getElementById('amount_11').innerHTML = val1 * val2;  
     }  
     
     function Amount12() {  
         var val1 = document.getElementById('area_12').value;  
         var val2 = document.getElementById('rate_12').value;  
   
         if (val1 != '' && val2 != '')  
             document.getElementById('amount_12').innerHTML = val1 * val2;  
     }  
     
     function Amount13() {  
         var val1 = document.getElementById('area_13').value;  
         var val2 = document.getElementById('rate_13').value;  
   
         if (val1 != '' && val2 != '')  
             document.getElementById('amount_13').innerHTML = val1 * val2;  
     }  
     
     function Amount14() {  
         var val1 = document.getElementById('area_14').value;  
         var val2 = document.getElementById('rate_14').value;  
   
         if (val1 != '' && val2 != '')  
             document.getElementById('amount_14').innerHTML = val1 * val2;  
     }  
     
     function Amount15() {  
         var val1 = document.getElementById('area_15').value;  
         var val2 = document.getElementById('rate_15').value;  
   
         if (val1 != '' && val2 != '')  
             document.getElementById('amount_15').innerHTML = val1 * val2;  
     }  
</script>

[urtrivedi]

You must intialize your javascript variable in line number 2 of your code

var estimatedCost=0;

[jellybeannn]

Thanks I get a value now, but it is the wrong value.

[fxm]

Thanks I get a value now, but it is the wrong value.

The second for loop in this demo

<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org">
    <title></title>
  </head>
  <body>
    <table>
      <tr>
        <td>
          <input name="rate">
        </td>
        <td>
          <input name="area">
        </td>
        <td>
          <label></label>
        </td>
      </tr>
      <tr>
        <td>
          <input name="rate">
        </td>
        <td>
          <input name="area">
        </td>
        <td>
          <label></label>
        </td>
      </tr>
      <tr>
        <td>
          <input name="rate">
        </td>
        <td>
          <input name="area">
        </td>
        <td>
          <label></label>
        </td>
      </tr>
      <tr>
        <td>
          <input name="rate">
        </td>
        <td>
          <input name="area">
        </td>
        <td>
          <label></label>
        </td>
      </tr>
      <tr>
        <td>
          <input name="rate">
        </td>
        <td>
          <input name="area">
        </td>
        <td>
          <label></label>
        </td>
      </tr>
      <tr>
        <td>
          <input name="rate">
        </td>
        <td>
          <input name="area">
        </td>
        <td>
          <label></label>
        </td>
      </tr>
      <tr>
        <td>
          <input name="rate">
        </td>
        <td>
          <input name="area">
        </td>
        <td>
          <label></label>
        </td>
      </tr>
      <tr>
        <td>
          <input name="rate">
        </td>
        <td>
          <input name="area">
        </td>
        <td>
          <label></label>
        </td>
      </tr>
      <tr>
        <td>
          <input name="rate">
        </td>
        <td>
          <input name="area">
        </td>
        <td>
          <label></label>
        </td>
      </tr>
      <tr>
        <td>
          <input name="rate">
        </td>
        <td>
          <input name="area">
        </td>
        <td>
          <label></label>
        </td>
      </tr>
      <tr>
        <td>
        </td>
        <td>
        </td>
        <td>
          <label></label>
        </td>
      </tr>
    </table>
    <script type="text/javascript">

        var rates = document.getElementsByName("rate");
        var areas = document.getElementsByName("area");
        var amounts = document.getElementsByTagName("label");

		// populate demo values
        for (var i = 0; i < rates.length; i++) {
            rates[i].value = 10 + i;
            areas[i].value = 100 + i;
        }

		// compute costs and estimatedCost
        var EC = 0
        for (var i = 0; i < rates.length; i++) {
            var cost = rates[i].value * areas[i].value;
            EC += cost;
            amounts[i].appendChild(document.createTextNode(cost));
        }

        amounts[i].appendChild(document.createTextNode(EC));
    </script>
  </body>
</html>

shows how to avoid the effort of writing out each calculation individually and reduce the chances of typing errors.

[rajarajan2017]

Yes check it by intializing the value and make the loop proper as fxm said

[fxm]

if (val1 != '' && val2 != '')

You should probably be validating for numeric input, not just non-null.

[tqwhite]

Without analyzing your code, I will tell you that most of the time when I get bad arithmetic on web page input, it is because I 'added' two values I got from the form and the compiler treated them as strings. '12'+'34'='1234', not 46.

Explicitly typecast your input values might be the ticket: Number('12')+Number('34') does, in fact, add up to 46.

[fxm]

typecast

Arithmetic operators other than + do that automatically.

To prevent + from concatenating when it is the only operator present, use the unary plus +elem.firstChild.data

[jellybeannn]

FXM,
I need the values to change when the user leaves the input box, and I've got more labels in the page than just, the table labels.

[fxm]

I need the values to change when the user leaves the input box
.onblur()

I've got more labels in the page than just, the table labels.
So adapt the code accordingly.