How to display JavaScript calculation in html code?

Question

I am trying to show the results of my calculation on the webpage. However I am unable to figure out how to display it.

It is for a assignment. I am currently stuck. I would appreciate the help.

Here is the code running the calculation:

// Convert into proper units
inches = (feet * 12) + inches;

// Calculate BMR
var BMR = 0;

if (gender == "Male") {
    BMR = 66 + (6.2 * pounds) + (12.7 * inches) - (6.76 * age); 
}
else {
    BMR = 655.1 + (4.35 * pounds) + (4.7 * inches) - (4.7 * age);
}

// Calculate TDEE
var TDEE = 0;

switch (activityLevel) {
    case "activityLevel1":
        TDEE = BMR * 1.2;
        break;
    case "activityLevel2":
        TDEE = BMR * 1.375;
        break;
    case "activityLevel3":
        TDEE = BMR * 1.55;
        break;
    case "activityLevel4":
        TDEE = BMR * 1.725;
        break;
    case "activityLevel5":
        TDEE = BMR * 1.9;
        break;
    default:
        TDEE = BMR * 1.2;
}

// Display BMR & TEE on the page
document.getElementById('bmr').innerHTML = '<p><b>BMR: </b>' + BMR.toFixed() + '</p > ';
document.getElementById('tdee').innerHTML = '<p><b>TDEE: </b>' + TDEE.toFixed() + '</p > ';

return false;

I'd like the results to show in-between bmr div and tdee div. Here is the code below. I do not know how to show the results:

        <br />
        </p>
        <br />
        <input type="submit" value="Calculate BMR" />
        <br />
        <div id="bmr"></div>
        <div id="tdee"></div>
        


    </form>

</article>




<script type="text/javascript" src="Assignment1.js"></script>
<script type="text/javascript">
    var form = document.getElementById("userSex");
    form.addEventListener('submit', BMR);
</script>

How would you like to display the data? Do you mean in-between like in-between the 2 elements or just inside the div elements? — axtck
– axtck, Commented Feb 5, 2021 at 19:45

Mr. Polywhirl · Accepted Answer · 2021-02-05 20:10:34Z

Instead of converting units, just determine if you are using Metric/Imperial before you do anything else.

Note: Looks like you are using the "Mifflin St Jeor" equation.

const activityFactors = [ 1.2, 1.375, 1.55, 1.725, 1.9 ];

const calculateBmr = (mode, gender, age, weight, height) => {
  const factor = gender === 'Female' ? -161 : 5;
  switch (mode) {
    case 'Metric':
      return (10 * weight) + (6.25 * height) - (5 * age) + factor;
    case 'Imperial':
      return (4.536 * weight) + (15.88 * height) - (5 * age) + factor;
  }
  throw new Error(`Unknown mode "${mode}"`);
};

const calculateTdee = (bmr, activityLevel) => {
  return bmr * activityFactors[+activityLevel]
};

Full example

// Constants
const form = document.forms['bmr-calculator'];
const resultBmr = document.querySelector('#result-bmr');
const resultTdee = document.querySelector('#result-tdee');

// Forward declaration
const main = () => {
  form.addEventListener('submit', e => calculate(e, {
    bmr: resultBmr,
    tdee: resultTdee
  }));
  setFormValues(form, {
    mode: 'Imperial',
    age: 18,
    weight: 180,      // 180 lbs
    height: 60,       // 6' 00"
    activityLevel: 1  // Light activity
  });
};

// Begin helper functions
const setFormValues = (form, values) =>
  Object.entries(values).forEach(([name, value]) => {
    form.elements[name].value = value;
  });
  
const fieldMap = (form) => Object.fromEntries([...form.elements]
  .map((input) => {
    switch (input.tagName.toLowerCase()) {
      case 'input':
        const type = input.getAttribute('type');
        switch (type) {
          case 'number':
            return [input.name, +input.value];
        }
    }
    return [input.name, input.value];
  })
  .filter(([key]) => key));

// Begin calculator
const activityFactors = [ 1.2, 1.375, 1.55, 1.725, 1.9 ];

const calculateBmr = (mode, gender, age, weight, height) => {
  const factor = gender === 'Female' ? -161 : 5;
  switch (mode) {
    case 'Metric':
      return (10 * weight) + (6.25 * height) - (5 * age) + factor;
    case 'Imperial':
      return (4.536 * weight) + (15.88 * height) - (5 * age) + factor;
  }
  throw new Error(`Unknown mode "${mode}"`);
};

const calculateTdee = (bmr, activityLevel) => {
  return bmr * activityFactors[+activityLevel]
};

const calculate = (e, hooks) => {
  const form = e.target;
  const fields = fieldMap(form);
  const { mode, gender, age, weight, height, activityLevel } = fields;
  const bmr = calculateBmr(mode, gender, age, weight, height);
  const tdee = calculateTdee(bmr, activityLevel);
  hooks.bmr.textContent = bmr.toFixed(2);
  hooks.tdee.textContent = tdee.toFixed(2);
};

// Call main
main();

form
.results {
  display: flex;
  flex-direction: column;
  width: 25vw;
}

.form-field,
.result-row  {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 8em 1fr;
  margin-bottom: 0.33em;
}

.form-field > label,
.result-row > label {
  font-weight: bold;
}

.form-field > label:after,
.result-row > label:after {
  content: ':';
}

<form name="bmr-calculator" onsubmit="return false;">
  <div class="form-field">
    <label>Mode</label>
    <select name="mode">
      <option value="Metric">Metric</option>
      <option value="Imperial">Imperial</option>
    </select>
  </div>
  <div class="form-field">
    <label>Gender</label>
    <select name="gender">
      <option value="Male">Male</option>
      <option value="Female">Female</option>
    </select>
  </div>
  <div class="form-field">
    <label>Age</label>
    <input type="number" min="0" name="age" />
  </div>
  <div class="form-field">
    <label>Weight (kg/lbs)</label>
    <input type="number" min="0.0" step="0.01" name="weight" />
  </div>
  <div class="form-field">
    <label>Height (cm/in)</label>
    <input type="number" min="0.0" step="0.01" name="height" />
  </div>
  <div class="form-field">
    <label>Activity Level</label>
    <select name="activityLevel">
      <option value="0">Sedentary (Little or no exercise)</option>
      <option value="1">Light Activity (1-3 days/week)</option>
      <option value="2">Moderate Activity (3-5 days/week)</option>
      <option value="3">Very Activity (6-7 days/week)</option>
      <option value="4">Super Active (Physical job)</option>
    </select>
  </div>
  <input type="submit" value="Calculate BMR" />
</form>
<hr />
<div class="results">
  <div class="result-row">
    <label>BMR</label>
    <span id="result-bmr"></span>
  </div>
  <div class="result-row">
    <label>TDEE</label>
    <span id="result-tdee"></span>
  </div>
</div>

Shawn Simon · Accepted Answer · 2021-02-05 19:34:35Z

0

I ran it locally it worked from the code you posted. I did have to add the missing variables. Try simplifying the code and incrementally add more complexity.

answered Feb 5, 2021 at 19:34

Shawn Simon

162 bronze badges

Collectives™ on Stack Overflow

How to display JavaScript calculation in html code?

2 Answers 2

Full example

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Full example

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related