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>

Answer 1

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>

Answer 2

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.