CODEWITHSUNDEEP
javascripthtmljquerycss
Snake93
Snake93

Reputation: 476

Percentage calculation JS

I'm trying to get the percentage of a total, which is the sum of 3 different fields.

In practice, the calculation should be: var p_carb = (carb * 4) / (kcaltot); but kcaltot is not detected like the other variables, so I cannot perform the calculation.

I am a fan and not a pro, I don't know JS very well, can anyone give me directions on how to perform this calculation?

I should get the percentage of the Kcal fields. Thanks everyone for any answers.

calculate = function() {
  var carb = document.getElementById('carb').value;
  var pro = document.getElementById('pro').value;
  var fat = document.getElementById('fat').value;

  //Kcal Macro
  var kcal_carb = (carb * 4);
  document.getElementById('kcal_carb').value = kcal_carb.toLocaleString('it-IT', {
    maximumFractionDigits: 0
  }) + " Kcal";

  var kcal_pro = (pro * 4);
  document.getElementById('kcal_pro').value = kcal_pro.toLocaleString('it-IT', {
    maximumFractionDigits: 0
  }) + " Kcal";

  var kcal_fat = (fat * 9);
  document.getElementById('kcal_fat').value = kcal_fat.toLocaleString('it-IT', {
    maximumFractionDigits: 0
  }) + " Kcal";

  //Kcal Percentage
  var p_carb = (carb * 4) / (kcaltot);
  document.getElementById('p_carb').value = p_carb.toLocaleString('it-IT', {
    maximumFractionDigits: 0
  }) + " %";

  var p_pro = (pro * 4) / (kcaltot);
  document.getElementById('p_pro').value = p_pro.toLocaleString('it-IT', {
    maximumFractionDigits: 0
  }) + " %";

  var p_fat = (fat * 9) / (kcaltot);
  document.getElementById('p_fat').value = p_fat.toLocaleString('it-IT', {
    maximumFractionDigits: 0
  }) + " %";


  //Kcal Totali
  var kcaltot = (4 * carb) + (4 * pro) + (9 * fat);
  document.getElementById('kcaltot').value = kcaltot.toLocaleString('it-IT', {
    maximumFractionDigits: 0
  }) + " Kcal/day";


}
```
<!---Macros--->

<div class="container_macros">
  <div class="m_field">Carbs</div>
  <div class="m_field">Pro</div>
  <div class="m_field">Fat</div>
</div>

<!---Grams_input--->
<div class="container_macros">
  <input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" class="m_field" maxlength="3" id="carb" name "pro" placeholder="150g" form="macro" onchange="calculate()" required/>

  <input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" class="m_field" maxlength="3" id="pro" name "pro" placeholder="150g" form="macro" onchange="calculate()" required/>

  <input oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" class="m_field" maxlength="3" id="fat" name "pro" placeholder="150g" form="macro" onchange="calculate()" required/>
</div>

<!---Single Kcal--->
<div class="container_macros">
  <input type="text" class="m_field" id="kcal_carb" name="kcal_carb" placeholder="0 Kcal" min="1" form="macro" readonly/>

  <input type="text" class="m_field" id="kcal_pro" name="kcal_pro" placeholder="0 Kcal" min="1" form="macro" readonly/>

  <input type="text" class="m_field" id="kcal_fat" name="kcal_fat" placeholder="0 Kcal" min="1" form="macro" readonly/>
</div>

<!---Percentage--->
<div class="container_macros">
  <input type="text" class="m_field" id="p_carb" name="p_carb" placeholder="0 %" min="1" form="macro" readonly/>

  <input type="text" class="m_field" id="p_pro" name="p_pro" placeholder="0 %" min="1" form="macro" readonly/>

  <input type="text" class="m_field" id="p_fat" name="p_fat" placeholder="0 %" min="1" form="macro" readonly/>
</div>

<!---Result--->
<div class="kcal_total">
  <input type="text" class="kcal_res" id="kcaltot" name="kcal_res" placeholder="0.000 Kcal/Day" min="1" form="macro" readonly/>
  <label class="mts-label">Kcal total</label>
</div>

<form action="" id="macro">
</form>

https://jsfiddle.net/snake93/zcdq2vx9/78/

Upvotes: 1

Views: 142

Answers (1)

Sandsten
Sandsten

Reputation: 757

I think this will solve your problem. First you have to move the code where you define the variable "kcaltot" to be above/before the lines where you actually use it.

Secondly you have to multiply the percentage by 100 to go from decimal to percent. For example 0.2 to 20%.

//Kcal Totali
var kcaltot = (4*carb) + (4*pro) + (9*fat); // Define the variable before you use it!
document.getElementById('kcaltot').value = kcaltot.toLocaleString('it-IT', {maximumFractionDigits: 0}) + " Kcal/day";

//Kcal Percentage
var p_carb = (carb*4)/(kcaltot) * 100; // <-- Multiply by 100 to go from decimal to percent!
document.getElementById('p_carb').value = p_carb.toLocaleString('it-IT', {maximumFractionDigits: 0}) + " %";

var p_pro = (pro*4)/(kcaltot) * 100; // <-- Multiply by 100 to go from decimal to percent! 
document.getElementById('p_pro').value = p_pro.toLocaleString('it-IT', {maximumFractionDigits: 0}) + " %";

var p_fat = (fat*9)/(kcaltot) * 100; // <-- Multiply by 100 to go from decimal to percent! 
document.getElementById('p_fat').value = p_fat.toLocaleString('it-IT', {maximumFractionDigits: 0}) + " %";

Upvotes: 2

Related Questions