Question

我有一个问题，我正在尝试构建一个人们可以看到实时数据的系统，如果我放入500克牛奶，那么人们可以看到脂肪，糖果，固体的价值内容，为此我有一个重量的牛奶和只读文本框的测试盒，用于其他东西，如脂肪，甜味，固体等。

现在我想更新脂肪，甜味，固体对牛奶重量变化的价值

我已经在某种程度上实现了它，但问题是，即使降低牛奶的价值，价值也会持续增加。

我在这里添加代码请查看，我们非常感谢任何帮助/建议。

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克牛奶中的真实固体，脂肪和甜味的数据，然后用真正的牛奶重量更新它......

这是一张图片

仍然无法得到任何解决方案是否有任何人可以帮助我更好吗？

Answer 1

你的错误是solid的值会考虑它们之前的值并将它乘以你得到的值。

这显然是错误的：

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

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

因为varfatval是前一个值，您将mainval与其相乘，而不是将其与您需要的值相乘。你应该以某种方式初始化你需要的值，例如像这样（分别使用正确的值而不是12和13）：

<script type="text/javascript">
    var fat = 12;
    var sweet = 13;
</script>

然后将这些值用于您的更新，如下所示：

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

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

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


}

Answer 2

在更新该值之前，您必须清空这些输入..

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();
        $('#fat'+onlyidis).val(varfatval*mainval);

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

Answer 3

我正在尝试建立一个人们可以看到实时数据的系统，如果我放入500克牛奶，那么人们可以看到脂肪，糖果的价值含量[...] 问题是，即使降低牛奶的价值，价值也会继续增加

正如其他人所指出的，如果要根据实时（客户端）的输入权重计算不同内容的值，则需要将原始乘数存储在客户端代码中。

E.g。如果我们想要显示一种成分的脂肪量，并且知道该成分每克成分含有0.4克脂肪，则乘数为0.4。当实际重量发生变化时，我们必须从其乘数重新计算内容值。

在您的代码中，您似乎从服务器端代码插入乘数值，但不会单独存储原始乘数以进行客户端重新计算。您可以将它们存储在JavaScript代码中，例如：

<script>
var milkMultipliers = {
  fat: 0.01,
  sweetness: 3.2
}
</script>

或者，您可以将乘数存储为相应HTML元素的数据属性，例如沿着以下演示代码的行：

function update(elm){
  var ingredient = elm.id;
  var computables = ['fat', 'protein', 'carbo'];
  for(var i = 0; i < computables.length; i++){
    var tableCell = document.getElementById(ingredient + '-' + computables[i]);
    var multiplier = tableCell.getAttribute('data-multiplier');
    tableCell.innerHTML = (+elm.value) * (+multiplier); 
  }
}

update(document.getElementById('milk'));
update(document.getElementById('butter'));

th, td{
  text-align: left;
  padding: 0.4em;
}
body, input{
  font-family: sans-serif;
}

<table>
  <tr>
    <th>Ingredient</th>
    <th>Weight</th>
    <th>Fat</th>
    <th>Protein</th>
    <th>Carbohydrates</th>
  </tr>
  <tr>
    <td>Milk</td>
    <td>
      <input id="milk" onkeyup="update(this)" value="1"/>
    </td>
    <td id="milk-fat" data-multiplier="0.01"></td>
    <td id="milk-protein" data-multiplier="0.034"></td>
    <td id="milk-carbo" data-multiplier="0.05"></td>
  </tr>
    <tr>
    <td>Butter</td>
    <td>
      <input id="butter" onkeyup="update(this)" value="1"/>
    </td>
    <td id="butter-fat" data-multiplier="0.81"></td>
    <td id="butter-protein" data-multiplier="0.009"></td>
    <td id="butter-carbo" data-multiplier="0.001"></td>
  </tr>
</table>

Answer 4

而不是计算脂肪，甜味等的含量，你只需要将脂肪，甜味输入框中的先前值相乘。

// calculate amount of fat from milk amount i.e from mainval
$('#fat'+onlyidis).val(calculatedValue);

// calculate amount of sweet from milk amount i.e from mainval
$('#sweet'+onlyidis).val(calculatedValue);

基于其他文本框的值的文本框的值

4 个答案: