0

As practice, I have been making a simple BMR/TDEE/BMI calculator. I got the HTML and CSS to work fine, however, while I think the Javascript code is fine and the formulas are correct, I can't for the life of me get the result from the code to appear on my calculator. I was hoping I could get some insight as to what I am doing wrong.

// Create variables

var height = document.getElementById("height").value / 39.37;
var weight = document.getElementById("weight").value / 2.205;
var activity = document.getElementById("activity").value;
var gender = document.getElementsByClassName("dataGender").value;
var age = document.getElementById("age").value;

//Calculate Tip
function calculateBMI(height, weight) {

  //validate input
if (height === "" || weight == 0) {
alert("Please enter values");
return;
  }

  //Calculate BMI
  var bmi = height / math.pow(weight, 2);
  //round to two decimal places
  bmi = Math.round(bmi * 100) / 100;
  //next line allows us to always have two digits after decimal point
  bmi = bmi.toFixed(2);
  return bmi;
}

function calculateBMR(height, weight, age, gender) {

  var bmr = null;
  switch (gender) {
    case "male":
      bmr = 66.5 + (13.75 * weight) + (5.003 * height) - (6.755 * age);
      break;
    case "female":
      bmr = 655.1 + (9.563 * weight) + (1.850 * height) - (4.676 * age);
      break;
  }
  return bmr;
}

function calculateTDEE(bmr) {

  var tdee = null;
  switch (activity) {
    case "Sedentary":
      tdee = Math.round(bmr * 1.2);
      break;
    case "Light Exercise (1-2 days/week)":
      tdee = Math.round(bmr * 1.375);
      break;
    case "Moderate Exercise (3-5 days/week)":
      tdee = Math.round(bmr * 1.55);
      break;
    case "Heavy Exercise (6-7 days/week)":
      tdee = Math.round(bmr * 1.725);
      break;
    case "Athlete (2x per day)":
      tdee = Math.round(bmr * 1.9);
      break;
  }
  return tdee;
}

function displayResults(bmi, bmr, tdee) {

  //Display the results
  document.getElementById("bmr").style.display = "block";
  document.getElementById("bmr").innerHTML = bmr;
  document.getElementById("bmi").style.display = "block";
  document.getElementById("bmi").innerHTML = bmr;
  document.getElementById("tdee").style.display = "block";
  document.getElementById("tdee").innerHTML = tdee;
}

//click to call function
document.getElementsByClassName("butn").onclick = function() {
  displayResults();

};

When I click on the 'Calculate' button on my webpage it shows just a blank block. Help would be appreciated. Thank you.

ImTryingJennifer
  • 11
  • 1
  • 1
    Your problem can be reduced to `document.getElementsByClassName("butn").onclick = function() { alert("hi"); };`. – melpomene May 02 '19 at 01:28
  • You don't pass anything to `displayResults()`, which means all of its parameters are undefined when you do call it. And you never call any of the other functions you define; they are literally doing nothing. – elixenide May 02 '19 at 01:29
  • in your `.onclick`, you have `displayResults()`, which is not passed any function parameters therefore `bmi`, `bmr`, and `tdee` is `undefined` hence there's nothing to display. – yqlim May 02 '19 at 01:29
  • @EdCottrell That doesn't really matter because it's never called. – melpomene May 02 '19 at 01:31
  • On a sidenote, your `gender` var would be `undefined` too, because you can't get `.value` from `.getElementsByClassName(...)`. Read [here](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName). Same applies to your `.getElementsByClassName('.butn').onclick`. – yqlim May 02 '19 at 01:32
  • Also, as @melpomene pointed out, your function is never actually called. The reason for this (which melpomene did not state) is that you can't assign an `onclick` handler directly to the results of `.getElementsByClassName`. See https://stackoverflow.com/questions/13667533/getelementsbyclassname-onclick-issue – elixenide May 02 '19 at 01:49
  • Thank you everyone for helping me out. I changed both Gender and the butn to getElementById instead. If I could bother you further, am I passing the parameters in the displayResults() function or the .onclick function? – ImTryingJennifer May 02 '19 at 13:48

0 Answers0