Validation & Calculate BMI-CodePudding

This is a BMI calculator. I expect to check the data validation first. text fields cannot be empty. And then calculate the BMI and display into another text box.. Validation part is working properly, but the calculating function is not. Please help me to find the error.

function validate() {
  if (document.myForm.weight.value == "") {
    alert("Please provide your weight!");
    document.myForm.weight.focus();
    return false;
  }

  if (document.myForm.height.value == "") {
    alert("Please provide your heught!");
    document.myForm.height.focus();
    return false;
  }
  calBMI();
}

function calBMI() {
  var weight = getElementById("weight").value;
  var height = getElementById("height").value;
  var bmi = weight / (height * height);

  document.getElementById("bmi").innerHTML = bmi;
}

<body>
  <form name="myForm">

    <label>weight</label>
    <input type="text" name="weight" id="weight">

    <label>height</label>
    <input type="text" name="height" id="height">

    <input type="text" readonly="readonly" id="bmi">

    <input type="submit" value="Submit" onclick="validate() calBMI()">
  </form>

</body>

CodePudding user response：

Show code snippet

function validate() {
  var height = document.getElementById("height").value;
  var weight = document.getElementById("weight").value;
  
  if (height == "" || height == 0) {
    document.getElementById("result").innerHTML = "Please enter a valid height";
    return;
  }
  
  if (weight == "" || weight == 0) {
    document.getElementById("result").innerHTML = "Please enter a valid weight";
    return;
  }
  calBMI();
}

function calBMI() {
  var weight = document.getElementById("weight").value;
  var height = document.getElementById("height").value;
  var bmi = weight / (height * height);

  document.getElementById("result").innerHTML = `BMI: ${bmi}`;
}

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
  <div>Weight</div>
  <input type="number" id="weight">
  <div>Height</div>
  <input type="number" id="height">
  <input type="submit" value="Submit" onclick="validate()">
  <div id="result"></div>
</body>
</html>

CodePudding user response：

Add proper functions to calculate bmi. No need to call calculatebmi on submit.

var form = document.getElementsByName('myForm')[0];
form.addEventListener('submit', validate);

function validate(e) {
  e.preventDefault();
  if (document.myForm.weight.value == "") {
    alert("Please provide your weight!");
    document.myForm.weight.focus();
    return false;
  }

  if (document.myForm.height.value == "") {
    alert("Please provide your heught!");
    document.myForm.height.focus();
    return false;
  }
  var weight = document.myForm.weight.value;
  var height = document.myForm.height.value;
  calBMI(weight, height);
  return true;
}

function calBMI(w, h) {
  var bmi = Math.ceil((w / Math.pow(h, 2)) * 703);
  document.getElementById("bmi").setAttribute('value', bmi);
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <form name="myForm">

    <label>weight</label>
    <input type="text" name="weight" id="weight">

    <label>height</label>
    <input type="text" name="height" id="height">

    <input type="text" readonly="readonly" id="bmi">

    <input type="submit" value="Submit" onclick="validate();">
  </form>

</body>

</html>