How to get var from two different function in new function

JavaScript
1

I have two table each table has own summation and average. I used two different functions to get that average and I need to get the sum of summation … but there is a problem I can’t to get the summation.
This is my code

<HTML>
<table>
<tbody>
<tr class="txtMultr">
	<td style="width: 254px">+ MD11</td>
	<td><input type="text" name="txtEmmail" class="valr1" value="195048" disabled></td>
	<td><input type="text" name="txtEmmail" class="valr2" ></td>
	<td><span class="multTotalr" disabled > </span></td>
</tr>
<tr class="txtMultr">
	<td style="width: 254px">+ MD11 COMBI</td>
	<td><input type="text" name="txtEmmail" class="valr1" value="207749" disabled></td>
	<td><input type="text" name="txtEmmail" class="valr2" ></td>
	<td><span class="multTotalr" disabled > </span></td>
</tr>
<tr class="txtMultr">
	<td style="width: 254px">+ MD11F</td>
	<td><input type="text" name="txtEmmail" class="valr1" value="213872" disabled></td>
	<td><input type="text" name="txtEmmail" class="valr2" ></td>
	<td><span class="multTotalr" disabled > </span></td>
</tr>
</tbody>
</table><br>
<table>
<tbody>
<tr class="txtMult">
	<td style="width: 254px">IL62</td>
	<td><input type="text" name="txtEmmail" class="val1" value="114308" disabled></td>
	<td><input type="text" name="txtEmmail" class="val2" ></td>
	<td><span class="multTotal" disabled > </span></td>
</tr>
<tr class="txtMult">
	<td style="width: 254px">VC10-1100</td>
	<td><input type="text" name="txtEmmail" class="val1" value="97978" disabled></td>
	<td><input type="text" name="txtEmmail" class="val2" ></td>
	<td><span class="multTotal" disabled > </span></td>
</tr>
<tr class="txtMult">
	<td style="width: 254px">VC10-1150</td>
	<td><input type="text" name="txtEmmail" class="val1" value="107503" disabled></td>
	<td><input type="text" name="txtEmmail" class="val2" ></td>
	<td><span class="multTotal" disabled > </span></td>
</tr>
</tbody>
</table><br>
<div>Total  annual non-wide-body aeroplane landing mass:
	<div><span id="grandTotal" > </span></div>			
        <div><span id="grandPer" > </div><br/>&nbsp;%</div><br>
<div>Total annual wide-body aeroplane landing mass:
	<div><span id="grandTotalr" > </span></div>	
        <div><span id="grandPerr" > </div><br/>&nbsp;%</div><br>
<div >Total annual aeroplane landing mass:
	<div><span id="totalr"></span></div><br>
```   ``
and this is script I used 
```   ``
<script>
 $(document).ready(function () {
       $(".txtMult input").keyup(multInputs);
       function multInputs() {
		   var grandTotal = document.getElementById('grandTotal');
		   var txtMult = document.getElementsByClassName('txtMult');
           var mult = 0;
           var pers = 0;
		   var sumMorgager = 0;
           // for each row:
           $("tr.txtMult").each(function () {
               // get the values from this row:
			  for( var i = 0; i < txtMult.length; i++ ){
			  sumMorgager += Number(txtMult[i].value);}
               var $val1 = $('.val1', this).val();
               var $val2 = $('.val2', this).val();
               var $total = ($val1 * 1) * ($val2 * 1)
               $('.multTotal',this).text($total);
               mult += $total;
			  pers= (mult/48)/100;
           });
             return grandTotal.innerText = mult;
           $("#grandPer").text(pers); 
       }
  });


 $(document).ready(function () {
       $(".txtMultr input").keyup(multInputrs);
       function multInputrs() {
		   var grandTotalr = document.getElementById('grandTotalr');
		   var txtMultr = document.getElementsByClassName('txtMultr');
           var multr = 0;
           var persr = 0;
		   var sumMorgage = 0;
           // for each row:
           $("tr.txtMultr").each(function () {
               // get the values from this row:
			   for( var i = 0; i < txtMultr.length; i++ ){
			  sumMorgage += Number(txtMultr[i].value);}
               var $valr1 = $('.valr1', this).val();
               var $valr2 = $('.valr2', this).val();
               var $totalr = ($valr1 * 1) * ($valr2 * 1)
               $('.multTotalr',this).text($totalr);
               multr += $totalr;
               persr = (multr/22)/100;
           });
              return grandTotalr.innerText = multr;
           $("#grandPerr").text(persr);
       }
  });
  
  
  
 function addFunctionOneAddFunctionTwo (){
  var totalM = grandTotal.innerText || 0; 
  var totalB = grandTotalr.innerText || 0;
  document.getElementById('totalr').innerText = Number(totalM) + Number(totalB);
}

document.addEventListener('keyup', function() {
  multInputs();
  multInputrs();
  addFunctionOneAddFunctionTwo();
});
</script>
```   ``

please help me I want to get the summation on (grandTotal)and (grandTotalr) to sum them in (totalr).
2

You should have (at most) one of these.

3

it doesn’t work at all when I use one of these

4

Move all of the functions (including the event listener) into the callback function of a single $(document).ready I just tested it and it works after doing so.

By having everything separate, the function calls were not in the same scope of the function declarations.

5

I think that you are also having issues with the fact that your grandPer and grandPerr lines occur after return statements. A return ends a function’s execution.

1 Like
6

I edit the code to this , but still nothing shown in (totalra)? could u help me

<script>
 $(document).ready(function () {
       $(".txtMult input").keyup(multInputs);
	   $(".txtMultr input").keyup(multInputrs);
       function multInputs() {
		   var grandTotal = document.getElementById('grandTotal');
		   var txtMult = document.getElementsByClassName('txtMult');
		   var grandTotalr = document.getElementById('grandTotalr');
		   var txtMultr = document.getElementsByClassName('txtMultr');
           var mult = 0;
           var pers = 0;
		   var sumMorgager = 0;
		   var multr = 0;
           var persr = 0;
		   var sumMorgage = 0;
           // for each row:
           $("tr.txtMult").each(function () {
               // get the values from this row:
			  for( var i = 0; i < txtMult.length; i++ ){
			  sumMorgager += Number(txtMult[i].value);}
               var $val1 = $('.val1', this).val();
               var $val2 = $('.val2', this).val();
               var $total = ($val1 * 1) * ($val2 * 1)
               $('.multTotal',this).text($total);
               mult += $total;
			  pers= (mult/48)/100;
           });
		   $("tr.txtMultr").each(function () {
               // get the values from this row:
			   for( var i = 0; i < txtMultr.length; i++ ){
			  sumMorgage += Number(txtMultr[i].value);}
               var $valr1 = $('.valr1', this).val();
               var $valr2 = $('.valr2', this).val();
               var $totalr = ($valr1 * 1) * ($valr2 * 1)
               $('.multTotalr',this).text($totalr);
               multr += $totalr;
               persr = (multr/22)/100;
           });
           $("#grandPer").text(pers); 
		   $("#grandPerr").text(persr);
		    grandTotalr.innerText = multr;
		    grandTotal.innerText = mult;
       }
  });

 function addFunctionOneAddFunctionTwo (){
  var totalM = grandTotal.innerText || 0; 
  var totalB = grandTotalr.innerText || 0;
  document.getElementById('totalra').innerText = Number(totalM) + Number(totalB);
}
document.addEventListener('keyup', function() {
  multInputs();
  addFunctionOneAddFunctionTwo();
});
</script>
7

You did not put the addFunctionOneAddFunctionTwo or the event listener code inside the $(document).ready callback function.

8

thank u its work successfully

9

could u help me in this question please

10