Calculate via JS by Span id

Question

In the code below, the two are 'fed' by a select via JS, i.e., I choose the option on select and it fills me these two fields (numerical, Float).

I have another field input which is 'powered' by other inputs (sum of inputs, total shopping cart).

What I want to do is this: when to change the input "total" or when changing the "aaa" or "bbb", via JS, happen a type operation: "total" * "aaa" * "bbb" and fills the input "ccc".

<input name="total" id="total" hidden/>

<select name="forma_pgto" id="forma_pgto">				
  <option value="1">A Vista</option>
  <option value="2">Credito</option>
</select>

<span name="aaa" id="aaa" hidden>0</span>
<span name="bbb" id="bbb" hidden>0</span>

<input name="ccc" id="ccc" readonly/>

The selection of select makes a real-time search in the BD and returns the value of the 2 rates to "aaa" and "bbb".

I tried it like this, but it didn’t work:

$(function(){
   var taxa1 = Number(document.getElementById("aaa").value);
   var taxa2 = Number(document.getElementById("bbb").value);
   var total = Number(document.getElementById("total").value);
   $("#forma_pgto").on("change", function(){ //usando o id do select
	$("#ccc").val(taxa1.toFixed(2)*taxa2.toFixed(2)*total.toFixed(2));
		});
});

EDIT - to illustrate my operation, I made the table as per: Mark Checklist container and run JS

And this select forma_pgto, would modify the total value of the cart (because it depends on card fees, so if it is the view the rate is X, credit Y and so on...) and would throw the final value in the "ccc".

Answer 1

For starters, make sure that jQuery is imported into your page...

Cup the next:

$("#aaa").on("change", function() {
   Recalcular();
});

$("#bbb").on("change", function() {
   Recalcular();
});

$("#total").on("change", function() {
   Recalcular();
});

function Recalcular() {
   var taxa1 = Number(document.getElementById("aaa").textContent);
   var taxa2 = Number(document.getElementById("bbb").textContent);
   var total = Number(document.getElementById("total").value);
   $("#ccc").val(taxa1.toFixed(2)*taxa2.toFixed(2)*total.toFixed(2));
}