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

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

вот изображение

все еще не могу получить какое-либо решение, есть ли кто-нибудь, кто может мне помочь лучше?

Ответ 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);