logo标签列表

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

javascripthtml
12

我有一个问题，我正在尝试构建一个系统，让人们可以查看实时数据，例如，如果我加入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

->

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克牛奶中实体、脂肪和糖的数据，然后在这里使用牛奶的真实重量进行更新...

这里是一张图片

输入图像描述

仍然无法得到任何解决方案，有没有人可以更好地帮助我？

每次重新运行时，它都会基于字段中的现有值再次增加该值，而您已经在之前的操作中对其进行了增加。我认为您需要单独保留原始的“基础”乘数值的副本并重复使用它们。 - ADyson
即使我减少牛奶的重量，脂肪仍会不断地增殖和增加。 - Amani
@ADyson 是的，但我不知道如何保留它的值，如果我将其保留在函数内部，每次函数运行时都会更改，而且无法将其保留在外部.. - Amani
我更新了我的答案，展示了如何确保无法读取的文本字段中的值基于牛奶当前的价值是准确的。 - user3483203
“不能把它放在外面”为什么？在更高的作用域中定义一个变量恰好是您需要的解决方案，很难想到其他方法来实现。Lajos的答案给出了正确的方法。 - ADyson
你在这里想做什么？这里只有一个可编辑字段。你正在从一个“只读”字段中获取值并再次更新该字段。它的值会改变，因此下一次尝试（在下一个“keyup”中）它只会拾取更新后的值。 - Rajshri Mohan K S
4个回答
3
您的错误在于固体的值将考虑其先前的值并将其乘以您拥有的值。
这显然是错误的：
        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);


}
是的，但它没有被定义，它会随着每个成分的变化而改变，而且一个页面有许多成分，请查看您所附的图片！ - Amani
3
根据你提供的信息，这是你能得到的最接近解决方案。 - Rajshri Mohan K S
@Amani 你有每个配料的数据，因此你需要确保在客户端以变量的形式知道它们。 - Lajos Arpad
1
我正在尝试构建一个系统，人们可以看到实时数据，比如，如果我放了500克牛奶，那么人们可以看到脂肪、糖分等含量值...问题是，即使减少了牛奶的数量，该值仍然会不断增加。
正如其他人所指出的，如果您想基于实时输入重量计算不同成分的值（客户端），则需要在客户端代码中存储原始乘数。例如，如果我们想显示某个成分的脂肪含量，并且知道该成分每克含有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>

1

在更新该值之前，您需要清空那些输入。

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); 
 }
你的代码和 OP 的代码之间没有功能上的区别。 - ADyson
不能使用这个，它是一样的吗？ - Amani
不，我是在添加新值之前加入了 $('#sweet'+onlyidis).val(); 这行代码。 - Miten Patel
是的，但最终结果是相同的，因为在下一行中，您立即使用基于字段先前内容的值覆盖它，与原始代码所做的完全相同。您的新行是多余的。仔细思考执行过程，并在发布之前尝试测试您的答案。 - ADyson
0

不要计算脂肪、糖等的含量，而是直接将其乘以脂肪、糖输入框中的先前值。

// 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);
我无法接受这个踩票。我的解决方案恰好指出了错误所在。数值的计算是基于原帖作者的公式。 - Vijay
它指出了错误，但没有提供解决方案。一个答案应该实际上提供一个可行的解决方案，不是吗？ - ADyson
实际上，计算部分是 OP 的部分。我无法告诉你计算公式。因此，我已经包含了适当的注释。所以我的解决方案不应该被贬低。 - Vijay
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接