文本框值基于使用JavaScript的另一个文本框

Question

我想要什么：我附上了一个网站的图片，人们可以从成分列表中选择成分，然后在这里他们可以添加特定成分的重量。

每种成分都含有脂肪，固体等，已经在数据库中按每克定义，我希望在用户更改该成分的重量时实时更新这些值。

默认情况下，此处所有成分的重量为1克，然后1克的脂肪，甜度等默认值，如果用户使其为10克，则脂肪，甜味等将乘以默认值10和当用户减轻体重时也会减少。

我希望水的重量是所有成分的重量之和 - 1000。我该怎么做？

我在这里添加代码：

HTML

   <td><input type="text" name="name" placeholder="Weight" class='smalltextbo onlynumbers' id="w<?=$thedetails_array['sno']?>" onkeyup="return updatevalues(this);" onkeypress="return isNumber(event);"; value='1'/></td>
                      <td><input type="text" name='fat' value="<?=$thedetails_array['fat']?>" id="fat<?=$thedetails_array['sno']?>" readonly></td>
                      <td><input type="text" name='sweet' value="<?=$thedetails_array['sweet']?>" id="sweet<?=$thedetails_array['sno']?>" readonly></td>
                      <td><input type="text" name='solid1' value="<?=$thedetails_array['solid1']?>" id="solid<?=$thedetails_array['sno']?>" readonly></td>

JavaScript的：

function updatevalues(vale){
            var mainid=$(vale).attr("id");
            var onlyidis=mainid.substr(1);
            var mainval=$('#w'+onlyidis).val();

            var varfatval=$('#fat'+onlyidis).val();
            $('#fat'+onlyidis).val(varfatval*mainval);

            var varfatval=$('#sweet'+onlyidis).val();
            $('#sweet'+onlyidis).val(varfatval*mainval);


}

我有1克牛奶中真实固体，脂肪和甜味的数据，然后用真正的牛奶重量更新。