CODEWITHSUNDEEP
javascriptjquery
Novice
Novice

Reputation: 535

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 many different functions and different ways. Is there any way that I attach a function to subTotalA and SubTotalB to recalculate the Total whenever they change their value. I also want to be able to update the some html elements showing these values in the html pages.

Upvotes: 0

Views: 2967

Answers (6)

SoR
SoR

Reputation: 94

You can use react to use it
useState is the best way to do it...

import React, { useState } from 'react';

const App = () => {

  const [x, setX] = useState(1),
       [y, setY] = useState(2);

      return (
          <div>
            { x + y }
          </div>
       )
}

export default App;

Upvotes: 0

Amadan
Amadan

Reputation: 198314

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

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

var model = new Model();

ko.applyBindings(model);

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

setInterval(function() {
  model.subTotalB(model.subTotalB() + 1);
}, 1100);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
Subtotal A: <input data-bind="value: subTotalA" readonly><br>
Subtotal B: <input data-bind="value: subTotalB" readonly><br>
<hr>
The total is <span data-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).

Upvotes: 1

Seth Holladay
Seth Holladay

Reputation: 9539

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

Upvotes: 3

prasanth
prasanth

Reputation: 22490

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}))

Upvotes: 0

Rasha Ahamed
Rasha Ahamed

Reputation: 26

Its simple

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

have a calculate function 

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

well for javascript

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

Upvotes: 0

g2jose
g2jose

Reputation: 1465

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);

Upvotes: 4

Related Questions