Javascript Variable Update With Other Variable Changes

I have three variables var subTotalA = 5; var subTotalB = 5; var Total = subTotalA + subTotalB; I am using subTotal in many places, and changes to the subtotal are applied in man

Solution 1:

Why not use a function instead? Something like

function getTotal(a, b) {
  return a + b;
}

You can then use it like the following:

var subTotalA = 5;
var subTotalB = 5;
var Total = getTotal(subTotalA, subTotalB);

Solution 2:

I suggest making a reusable updateTotal() function and calling that or passing it as a callback whenever necessary.

But if you really want to go crazy, you could use a getter on an object to calculate the total.

const calculation = {};
Object.defineProperty(calculation, 'total', {
    enumerable : true,
    get : () => {
        return subTotalA + subTotalB;
    }
});

Now we never have to set calculation.total, just set the subTotalA and subTotalB variables and the total will be "updated" accordingly. Or rather, it will calculate the appropriate value on-demand.

subTotalA = 2;
subTotalB = 5;
console.log(calculation.total);  // => 7
subTotalB = 9;
console.log(calculation.total);  // => 11

Solution 3:

Why not use a MV* framework, something like Knockout?

functionModel() {
  this.subTotalA = ko.observable(1);
  this.subTotalB = ko.observable(1);
  this.Total = ko.computed(function() {
    returnthis.subTotalA() + this.subTotalB();
  }, this);
}

var model = newModel();

ko.applyBindings(model);

setInterval(function() {
  model.subTotalA(model.subTotalA() + 1);
}, 1700);

setInterval(function() {
  model.subTotalB(model.subTotalB() + 1);
}, 1100);

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
Subtotal A: <inputdata-bind="value: subTotalA"readonly><br>
Subtotal B: <inputdata-bind="value: subTotalB"readonly><br><hr>
The total is <spandata-bind="text: Total">

Each time either of the subtotals is set (using model.subTotalA(...)), the computed property Total is updated, and also displayed. (With a bit more care regarding type conversion, it would even work if we let users type into the input boxes, the changes propagate automagically without you needing to explicitly write code for it.)

Yes, the syntax changes. Other MV* frameworks have less impact on syntax so you can choose whichever suits you best (but there is no framework that allows you to track changes to local variables, because there is no way to do that in JS to my knowledge).

Solution 4:

Its simple

 <inputtype="text"id="txtSubTotalA" onkeyup="calculate()">
  <inputtype="text"id="txtSubTotalB" onkeyup="calculate()">

have a calculate function

functioncalculate() {
    var total = $('txtSubTotalA').val() + $('txtSubTotalB').val();
}

well for javascript

functioncalculate() {
        var total = document.getElementById("txtSubTotalA").value +      document.getElementById("txtSubTotalA").value;
    }

Solution 5:

use some object function like this

var subTotalA = 5;
var subTotalB = 5;

var total = function(data)
            { 
              return data.a+data.b;
            }
console.log(total({'a':subTotalA,'b':subTotalB}))