My BMR calculator is not showing a result-CodePudding

I wrote this for a Bmr tool on my website. I don't have much understanding regarding html CSS just started learning this. . On running the snippet is not showing the result. I am unable to figure out 'why?'.

I wrote a similar code for BMI that worked fine but this one is not.

var bmr;

function calc() {
  var age = document.getElementById("age").value;
  var gender = document.getElementById("gender").value;
  var height = document.getElementById("height").value;
  var weigth = document.getElementById("weigth").value;
  if (gender == "masc") {
    bmr = 66.5   (13.75 * weigth)   (5.003 * height) - (6.755 * age);
  } else {
    bmr = 655.1   (9.563 * weigth)   (1.850 * height) - (4.676 * age);
  }
}

document.getElementsByTagName("button")[0].addEventListener("click", function() {
  calc();
  document.getElementById('lblResult').innerHTML = bmr;

})

* {
  .column {
    max-block-size: 100%;
  }
  @media (min-width: 600px) {
    .column {
      width: 50%;
    }
  }
}

body {
  margin: 0;
  min-height: 100vh;
  ;
  background: linear-gradient(to bottom right, #ffffff, #ffffff) font-family: LEMONMILK-Bold;
  font-size: 1rem;
  color: #ffffff;
}

.form {
  background-color: #0295DB;
  max-height: 240px;
  max-width: 450px;
  border-radius: 20px;
  margin: 1.25rem auto 1.25rem auto;
  padding-bottom: 0.4rem;
  display: block;
  border: solid 1px #289df6;
  box-shadow: 0 0 40px 0 #ddd;
}

.form:hover {
  box-shadow: 0 0 60px 0 #ccc;
  transition: .4s;
  transform: scale(1.02);
}

.row-one {
  padding: 1.25rem;
}

.row-two {
  padding: 1.25rem;
}

.text-input {
  width: 3.125rem;
  height: 1rem;
  border-radius: 10px;
  background-color: #dbeffe;
  border: none;
  outline: none;
  padding: 0.313rem 0.625rem;
  cursor: pointer;
}

.text-input:last-child {
  margin-bottom: 2.188rem;
}

.text-input:hover {
  background-color: #cbe7fd;
}

#submit {
  border: none;
  border-radius: 10px;
  max-height: 2.5rem;
  max-width: 8.75rem;
  background-color: #ffffff;
  color: #289df6;
  margin: auto;
  display: block;
  outline: none;
  cursor: pointer;
}

#submit:hover {
  background-color: #f7f7f7;
}

.text {
  display: inline-block;
  margin: 0.313rem 1.25rem 0.313rem 0.5rem;
  ;
}

.row-one {
  padding: 1.875rem 1.25rem 1.563rem 1.25rem;
}

.row-two {
  padding: 0.938rem 1.25rem 1.875rem 1.25rem;
}

.container {
  display: inline-block;
  position: relative;
  padding-left: 1.875rem;
  cursor: pointer;
  user-select: none;
}

.container input {
  position: absolute;
  opacity: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.563rem;
  width: 1.563rem;
  background-color: #dbeffe;
  border-radius: 50%;
}

.container:hover input~.checkmark {
  background-color: #cbe7fd;
}

.container input:checked~.checkmark {
  background-color: #289df6;
}

h3 {
  font-size: 1rem;
  font-weight: 400;
  text-align: center;
  padding: 0.938rem;
  color: #333333;
}

h3 b {
  font-size: 2rem;
  font-weight: 400;
  color: #289df6;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.container input:checked~.checkmark:after {
  display: block;
}

.container .checkmark:after {
  left: 0.563rem;
  top: 0.313rem;
  width: 0.313rem;
  height: 0.625rem;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

<link href="http://gadgetsense.in/wp-content/uploads/2021/09/LEMONMILK-Bold.otf" rel="stylesheet">


<form  id="form" onsubmit="return validateForm()">
  <div >
    <input type="text"  id="age" autocomplete="off" required/>
    <p >Age</p>
    <label >
  <input type="radio" name="gender" id="gender" value="fem"><p >Female</p>
    <span ></span>
  </label>
    <label >
  <input type="radio" name="gender" id="gender" value="masc"><p >Male</p>
    <span ></span>
  </label>
  </div>

  <div >
    <input type="text"  id="height" autocomplete="off" required>
    <p >Height (cm)</p>
    <input type="text"  id="weight" autocomplete="off" required>
    <p >Weight (kg)</p>
  </div>
  <button type="button" onclick="" id="submit">Submit</button>
</form>
<p id="lblResult">BMR</p>

CodePudding user response：

First, change onclick to include function name...

<button type="button" onclick="calc" id="submit">Submit</button>

Then change to...

<script>
function calc() {
  var bmr;
  var age = document.getElementById("age").value;
  var gender = document.getElementById("gender").value;
  var height = document.getElementById("height").value;
  var weigth = document.getElementById("weigth").value;
  if (gender == "masc") {
    bmr = 66.5   (13.75 * weigth)   (5.003 * height) - (6.755 * age);
  } else {
    bmr = 655.1   (9.563 * weigth)   (1.850 * height) - (4.676 * age);
  }
}

  document.getElementById('lblResult').innerHTML = bmr;

})

CodePudding user response：

In JavaScript, you want to get the value of an undefined element. Try to find the element that is on line 212.

Hope that helps, OpiliteX