Help with JavaScript

Question

jellybeannn -4 Junior Poster

13 Years Ago

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>

javascript

5 Contributors
9 Replies
109 Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by fxm

All 9 Replies

urtrivedi 276 Nearly a Posting Virtuoso

13 Years Ago

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

var estimatedCost=0;

fxm 23 Posting Pro

13 Years Ago

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

13 Years Ago

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

Edited 13 Years Ago by rajarajan2017 because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

jellybeannn -4 Junior Poster · Answer 1 · 2010-05-11T15:12:24+00:00

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

fxm 23 Posting Pro · Answer 2 · 2010-05-11T15:45:21+00:00

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

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

tqwhite 0 Newbie Poster · Answer 3 · 2010-05-11T19:31:38+00:00

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 23 Posting Pro · Answer 4 · 2010-05-11T20:45:43+00:00

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 -4 Junior Poster · Answer 5 · 2010-05-12T13:16:32+00:00

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 23 Posting Pro · Answer 6 · 2010-05-12T16:51:40+00:00

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.

Help with JavaScript

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers