.on('Input') dynamic updates and additions

Question

I have a set of HTML number inputs with ID's

YXS, YSM, YMED

I can get the values of each input, add them together, and display the result to #output.

HOWEVER, it only works when entered in order YXS, YSM, YMED

If i remove YSM so its blank, i only get YXS as a value output to #output.

Im trying to work it, so what ever values are entered, they're either added together and displayed, or if only 1 value is entered, then that value is displayed to #output regardless of the order of input.

Ive been scratching my head with it all day, so looking for some help where possible!

Here is my code :

$('#YXS').on("input", function() {
    var yxsInput = this.value;
    console.log(yxsInput);
    var Silver = (yxsInput / 100) * 90;               
    var Gold = (yxsInput / 100) * 85;             
    var Plat = (yxsInput / 100) * 80;
    var totalPrice = Number(yxsInput);
    $('#output').text(yxsInput);
    $("#output_Silver").html(Silver.toFixed(2));
    $("#output_Gold").html(Gold.toFixed(2));
    $("#output_Plat").html(Plat.toFixed(2));

    $('#YSM').on("input", function() {
    var ysmInput = this.value;
    console.log(ysmInput);
    var totalPrice = Number(yxsInput)+Number(ysmInput);
    var Silver = (totalPrice / 100) * 90;                 
    var Gold = (totalPrice / 100) * 85;           
    var Plat = (totalPrice / 100) * 80;
    $('#output').text(totalPrice);
    $("#output_Silver").html(Silver.toFixed(2));
    $("#output_Gold").html(Gold.toFixed(2));
    $("#output_Plat").html(Plat.toFixed(2));

    $('#YMED').on("input", function() {
    var ymedInput = this.value;
    console.log(ymedInput);
    var totalPrice = Number(yxsInput)+Number(ysmInput)+Number(ymedInput);
    var Silver = (totalPrice / 100) * 90;                 
    var Gold = (totalPrice / 100) * 85;           
    var Plat = (totalPrice / 100) * 80;
    $('#output').text(totalPrice);
    $("#output_Silver").html(Silver.toFixed(2));
    $("#output_Gold").html(Gold.toFixed(2));
    $("#output_Plat").html(Plat.toFixed(2));
    });
});

I have tried getting the inputs first

$('#YXS').on("input", function() {
    var yxsInput = this.value;
    console.log(yxsInput);

    $('#YSM').on("input", function() {
    var ysmInput = this.value;
    console.log(ysmInput);

    $('#YMED').on("input", function() {
    var ymedInput = this.value;
    console.log(ymedInput);

Which didnt work out either and console would tell me that yxsInput (for example) is not defined.

Hope ive explained well enough what my end goal is!

Many thanks,

Answer 1

Your problem is that your input event handlers are nested. So YSM and YMED trigger if only YXS is triggered.

Actually you don't need to have a separate handler for each input. See the snippet below:

$('#YXS, #YSM, #YMED').on("input", function() {
        var totalPrice = 0;
        $('#YXS, #YSM, #YMED').each(function(i, e) {totalPrice += ~~e.value});
        var Silver = totalPrice * 0.9;                 
        var Gold = totalPrice * 0.85;           
        var Plat = totalPrice * 0.8;
        $('#output').text(totalPrice);
        $("#output_Silver").html(Silver.toFixed(2));
        $("#output_Gold").html(Gold.toFixed(2));
        $("#output_Plat").html(Plat.toFixed(2));
    });

label, h3 {display:flex;
justify-content:space-between;
width:14rem; margin:1rem 0; padding:0}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>YXS: <input id="YXS"></label>
<label>YSM: <input id="YSM"></label>
<label>YMED: <input id="YMED"></label>

<h3>Silver: <span id="output_Silver">0.00</span></h3>
<h3>Gold: <span id="output_Gold">0.00</span></h3>
<h3>Plat: <span id="output_Plat">0.00</span></h3>
<h3>Total: <span id="output">0</span></h3>