javascript - 다른 텍스트 상자의 값을 기반으로 한 텍스트 상자의 값

실수로 고형분의 가치는 이전 가치를 고려하여 가지고있는 가치에 곱하는 것입니다.

이것은 분명히 틀렸다 :

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

}

해당 값을 업데이트하기 전에 입력을 비워야합니다 ..

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

I am trying to build a system where people can see the realtime data like, if I put 500 grams of milk then people can see the value content of fat, sweets [...] the problem is the value keeps on multiplying even on decreasing the value of milk

다른 사람들이 언급했듯이, 입력 가중치를 기반으로 다른 내용의 값을 실시간 (클라이언트 측)으로 계산하려면 원래 승수를 클라이언트 측 코드에 저장해야합니다.

예 : 성분의 지방 양을 표시하고 성분이 성분 1g 당 지방이 0.4g임을 알고 있으면 승수는 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>

지방, 스위트 등의 함량을 계산하는 대신 지방, 스위트 입력란에 이전 값을 곱하면됩니다.

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