BMR 计算器没有给我想要的答案如果其他问题

问题描述

我现在正在制作 BMR 计算器，并且我已经考虑了大部分内容。出于某种原因，此代码不想通过 if else 为我提供正确的值。它只给我一个条件，即使是另一个条件（例如，如果是男性，则计算女性）。

var bmr = 0;


function calc() {
  var age = document.getElementById("age").value;
  var gender = document.getElementById("gender").value;
  var height = document.getElementById("height").value;
  var weight = document.getElementById("weigth").value;

  if (gender == 'male') {
    bmr = 447.593 + (9.247 * weight) + (3.098 * height) - (4.330 * age);
  } else if (gender == 'female') {

    bmr = 88.362 + (13.397 * weight) + (4.799 * height) - (5.677 * age);
  }
}



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

})

* {
  Box-sizing: border-Box;
  margin: 0;
}

body {
  font-family: Verdana,Arial,sans-serif;
  background-color: #19a4fa;
  min-height: 100vh;
}

header {
  color: rgb(255,255,255);
  background-image: linear-gradient(to right,#0051ffee,#ff00d4);
  background-repeat: no-repeat;
  background-size: auto 100%;
  padding: .5em 0 .5em 5.5em;
  height: fit-content;
  text-align: center;
}

#wrapper {
  width: 980px;
  margin-right: auto;
  margin-left: auto;
}

#grad1 {
  height: 100vh;
  background-color: red;
  /* For browsers that do not support gradients */
  background-image: linear-gradient(155deg,#19a4fa,#a527f8);
}

#centre {
  text-align: center;
}

<div id="grad1">
  <div id="wrapper">
    <header>

      <h1>BMR Calculator</h1>

    </header>
    <br>
    <h4><strong>What is BMR?:</strong></h4>
    <p>Basal Metabolic Rate (BMR) is your Metabolism rate. It calculates the total amount of calories you should be eating per day based on Age,Height,Weight,and Gender.</p>

    <div id="centre">
      <form action="#">

        <label for="gender">Gender:</label><br>
        <input type="radio" id="gender" name="gender" value="male" required="required"> Male
        <input type="radio" id="gender" name="gender" value="female" required="required"> Female<br><br>

        <label for="age">How old are you?</label><br>
        <input type="number" id="age" value="age" required="required"><br><br>

        <label for="height">What is your height in centimetres? (cm):</label><br>
        <input type="number" id="height" value="height" required="required"><br><br>

        <label for="gender">What is your wight in kilograms? (kg):</label><br>
        <input type="number" id="weigth" value="weight" required="required"><br><br>
      </form>


      <button type="button" onclick="">
      Result</button><br>

      <textarea id="lblResult">BMR</textarea>
    </div>
  </div>
</div>

这让我困扰了一段时间，非常感谢您的帮助。

解决方法

在 html/javascript 中，您应该确保 ID 是唯一的。如下：

 <input type="radio" id="gender" name="gender" value="male" required="required"> Male
 <input type="radio" id="gender" name="gender" value="female" required="required"> Female<br><br>

您已将性别的 ID 指定给两个输入元素。

现在要修复性别选择，您需要做的是创建一个仅获取当前选择的单选按钮的选择器。

var gender = document.querySelector('input[name="gender"]:checked').value;