I have an issue where 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 , solid in it and for that I have a test box of weight of milk and readonly textboxes for other things like fat, sweet, solids etc.
now I want to update the value of fat,sweet,solids on change of weight of milk
I have achieved it to some extent but the problem is the value keeps on multplying even on decreasing the value of milk .
I am adding the code here please check and any help/ suggestions is deeply appreciated.
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); } I have a data of real solids, fat and sweet in 1 gram of milk then update it with the real weight of milk here ...
here is an image
still cant get any solution is there any one who can help me better please ??
5 Answers
Answers 1
Your mistake is that the value of solids will take into account their previous value and multiply it to the value you have.
This is clearly wrong:
var varfatval=$('#fat'+onlyidis).val(); $('#fat'+onlyidis).val(varfatval*mainval); var varfatval=$('#sweet'+onlyidis).val(); $('#sweet'+onlyidis).val(varfatval*mainval); since varfatval is the previous value and you multiply mainval with it, instead of multiplying it with the value you need. You should somehow initialize the values you will need, for example like this (use the correct values instead of 12 and 13, respectively):
<script type="text/javascript"> var fat = 12; var sweet = 13; </script> and then use these values for your updates, like this:
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); } Answers 2
You have to empty those input before update that value..
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); } Answers 3
instead of calculating the content of fat, sweet etc you are just multiplying with the previous value in fat, sweet input boxes.
// 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); Answers 4
In this example, the values of the text fields fat and salt are always accurate based on the value of milk. They do not store state, they recalculate each time the value of milk is changed.
$('#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>Answers 5
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
As noted by others, If you want to compute the value of different contents based on the input weight in realtime (client-side), you need to store the original multipliers in client-side code.
E.g. if we want to display the amount of fat of an ingredient, and know that the ingredient has 0.4 grams of fat per gram of ingredient, the multiplier is 0.4. When the actual weight changes, we must recompute the content value from its multiplier.
In your code, it appears that you insert the multiplier values from server-side code, but do not store the original multipliers separately for client-side recomputation. You could either store them in JavaScript code, for example like this:
<script> var milkMultipliers = { fat: 0.01, sweetness: 3.2 } </script> Or, you could store the multipliers as data attributes of the corresponding HTML elements, e.g. along the lines of the demo code below:
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>
0 comments:
Post a Comment