Adding two values from two different functions

Adding two values from two different functions
0

#1

Hello, im a new to javascript but learning as we go… i have a simple question for many.
I have two different functions they do add the number of total fields and display a total
but i want to add a 3 function that will add each total from the two different functions and display the total
can you all help me with that ?
here is the code…

//total input departments
function getTotalQty(){
  var totalMorgage = document.getElementById('totalMorgage');
  var qty = document.getElementsByClassName('qty');
  var sumMorgage = 0;
  for( var i = 0; i < qty.length; i++ ){
    sumMorgage += Number(qty[i].value);
  }
 //display the total of inputs
  totalMorgage.innerHTML = sumMorgage.toCurrencyString();
};
var elGetQty = document.getElementsByClassName('qty');
for( var i = 0; i < elGetQty.length; i++ ){
  elGetQty[i].addEventListener('keyup', getTotalQty );
}
//total input bills
function getBillsQty(){
  var totalBills = document.getElementById('totalBills');
  var qtyBills = document.getElementsByClassName('qtyBills');
  var sumBills = 0;
  for( var i = 0; i < qtyBills.length; i++ ){
    sumBills += Number(qtyBills[i].value);
  }
 //display the total of inputs
  totalBills.innerHTML = sumBills.toCurrencyString();
};
var qtyBills = document.getElementsByClassName('qtyBills');
for( var i = 0; i < qtyBills.length; i++ ){
  qtyBills[i].addEventListener('keyup', getBillsQty );
}

//want to add a 3 function that will add both total values of each function
function addFunctionOneAddFunctionTwo( ){

}

#2

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#3

You did not post your HTML code, but just glancing at your JavaScript code above I assume that after this code runs, there is an element with an id=“totalMorgage” and an element with an id=“totalBills” . I also assume these two elements have the corresponding correct values you want them to have. You have not specified under what conditions you want the addFunctionOneAddFunctionTwo function to run, so I will just assume there is a button when clicked will sum and return the sum. If you have specific conditions in which you want the function to run, then you will need to reply back.

var sumButton = document.getElementById('sumBtn');
sumButton.addEventListener('click', addFunctionOneAddFunctionTwo );

function addFunctionOneAddFunctionTwo() {
  var totalM = totalMorgage.innerText || 0; 
  var totalB = totalBills.innerText || 0;
  return Number(totalM) + Number(totalB);
}

#4

here is my HTML Code

<h3>Mortage Apartments:</h3>
  Dept 1<input type="text" class="qty"><br><br>
  Dept 2<input type="text" class="qty"><br><br>
  Dept 3<input type="text" class="qty"><br><br>
  <label>The Total Mortage is: <span id="totalMorgage"></span></label>

  <h3>Bills Apartments:</h3>
  Dept 1<input type="text" class="qtyBills"><br><br>
  Dept 2<input type="text" class="qtyBills"><br><br>
  Dept 3<input type="text" class="qtyBills"><br><br>
  <label>The Total Bills is: <span id="totalBills"></span></label>

  <h3>Total from Bills and morgage:</h3>
  <label id="finalTotal">The Total Mortage is:</label>

#5

Unless you have an external library which has a function called toCurrencyString, your code will error out, because there is not a native function in JavaScript called toCurrencyString that I am aware of. Also, you need to rethink your two functions getTotalQty and getBillsQty, because they are not currently displaying the correct sum. You need to first fix them before trying to sum the results of those two functions.


#6

If you modify your HTML to look like:

<h3>Mortage Apartments:</h3>

  Dept 1<input type="text" class="qty"><br><br>
  Dept 2<input type="text" class="qty"><br><br>
  Dept 3<input type="text" class="qty"><br><br>
  <label>The Total Mortage is: <span id="totalMorgage">0</span></label>
  <h3>Bills Apartments:</h3>
  Dept 1<input type="text" class="qtyBills"><br><br>
  Dept 2<input type="text" class="qtyBills"><br><br>
  Dept 3<input type="text" class="qtyBills"><br><br>
  <label>The Total Bills is: <span id="totalBills">0</span></label>

  <h3>Total from Bills and morgage:</h3>
  <label id="finalTotal">The Total Mortage is: <span id="total">0</span></label>

Then you can simpify all your JavaScript as follows:

//total input departments
function getTotalQty(){
  var totalMorgage = document.getElementById('totalMorgage');
  var qty = document.getElementsByClassName('qty');
  var sumMorgage = 0;

  for( var i = 0; i < qty.length; i++ )
    sumMorgage += Number(qty[i].value);
  
 //display the total of inputs
  totalMorgage.innerText = sumMorgage;
};
//total input bills
function getBillsQty(){
  var totalBills = document.getElementById('totalBills');
  var qtyBills = document.getElementsByClassName('qtyBills');
  var sumBills = 0;
  for( var i = 0; i < qtyBills.length; i++ )
    sumBills += Number(qtyBills[i].value);
  
 //display the total of inputs
  totalBills.innerText = sumBills;
};

function addFunctionOneAddFunctionTwo (){
  var totalM = totalMorgage.innerText || 0; 
  var totalB = totalBills.innerText || 0;
  document.getElementById('total').innerText = Number(totalM) + Number(totalB);
}

document.addEventListener('keyup', function() {
  getTotalQty();
  getBillsQty();
  addFunctionOneAddFunctionTwo();
});

#7

Thank you so much mr Dawson i got it now that is what i was looking forward too. you solved my concerns and questions thank you learning javascript and trying to make some examples that pop into my mind… thank you you are a genius… :slight_smile: