驗證和計算BMI-有解無憂

這是一個 BMI 計算器。我希望先檢查資料驗證。文本欄位不能為空。然后計算BMI并顯示到另一個文本框中。驗證部分作業正常，但計算功能不正常。請幫我找出錯誤。

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>

uj5u.com熱心網友回復：

顯示代碼片段

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>

uj5u.com熱心網友回復：

添加適當的函式來計算 bmi。無需在提交時呼叫 calculatebmi。

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/358010.html

標籤：javascript html 功能

上一篇：這個（max）函式如何使用while回圈作業？

下一篇：交替查找替換單詞python