Question

我有三个变量

var subTotalA = 5;
var subTotalB = 5;
var Total = subTotalA + subTotalB;

我在许多地方使用subTotal，并且对小计的更改会应用于许多不同的功能和不同的方式。是否有任何方法可以将函数附加到subTotalA和SubTotalB，以便在更改其值时重新计算Total。我还希望能够在html页面中更新显示这些值的一些html元素。

Answer 1

为什么不使用功能呢？像

这样的东西

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

然后您可以像以下一样使用它：

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

Answer 2

我建议创建一个可重用的updateTotal()函数并在必要时调用它或将其作为回调传递。

但如果你真的想发疯，可以在对象上使用吸气剂来计算总数。

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

现在我们永远不必设置calculation.total，只需设置subTotalA和subTotalB变量，总数将会更新＆＃34;更新＆＃34;因此。或者更确切地说，它将按需计算适当的值。

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

Answer 3

为什么不使用MV *框架，比如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">

每次设置任一小计（使用model.subTotalA(...)）时，计算属性Total都会更新，并且也会显示。（稍微关心类型转换，如果我们让用户输入输入框，它们甚至可以工作，更改会自动传播而不需要为它显式编写代码。）

是的，语法会发生变化。其他MV *框架对语法的影响较小，所以你可以choose以最适合你的方式（但是没有框架允许你跟踪局部变量的变化，因为根据我的知识在JS中没有办法做到这一点）。

Answer 4

简单

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

有计算功能

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

适用于javascript

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

Answer 5

使用像这样的对象函数

＆＃13;

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

＆＃13;

Answer 6

您可以使用react来使用它
useState是执行此操作的最佳方法...

import React, { useState } from 'react';

const App = () => {

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

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

export default App;

Javascript变量更新与其他变量

6 个答案: