Значение текстового поля на основе значения другого текстового поля

Ответ 1

Ваша ошибка в том, что значение твердых частиц будет учитывать их предыдущее значение и умножить его на значение, которое у вас есть.

Это явно неверно:

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


}

Ответ 2

Я пытаюсь создать систему, в которой люди могут видеть данные в реальном времени, например, если я поставлю 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>

Ответ 3

Вы должны удалить эти данные перед обновлением этого значения.

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

Ответ 4

В этом примере значения текстовых полей fat и salt всегда точны в зависимости от значения молока. Они не сохраняют состояние, они пересчитывают каждый раз, когда изменяется значение молока.

$('#milk').on('input',function(e){
    $('#fat').val(Number($(this).val())/100);
    $('#salt').val(Number($(this).val())/200);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="milk"></input>
<span>Fat</span>
<input id="fat" disabled="true"></input>
<span>Salt</span>
<input id="salt" disabled="true"></input>

Ответ 5

вместо вычисления содержания жира, сладкого и т.д. вы просто умножаетесь на предыдущее значение в жировых, сладких коробках ввода.

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