如何为 BMI_Calculator.html 编写 javascript 代码？

Question

我应该为一个 html 页面编写 javascript 代码，该代码将计算一个人的 BMI 并告诉他们这意味着什么（数字）。 测试的规则是不改变页面上的html，而只是编写javascript代码并将其链接到html页面。 就这样。 我复制了 html 页面，以防你们想看一看。 以下是 BMI 计算器应该使用 javascript 执行的操作：

人输入姓名，选择性别，输入体重和身高。 该应用程序将计算人的 BMR、BMI，并说明其含义（即说“你太瘦了”、“你很健康”或“你超重”）。 它将显示一个瘦的、健康的或超重的人的图像，这是一个 png 图像。
如果他们没有输入姓名，则会出现一条错误消息，提示他们输入姓名。 名称的长度必须至少为五个字符。
如果他们没有选择性别，则会出现一条错误消息，提示他们请选择性别。 性别由一个单选按钮表示。 用户选择男性或女性。
如果用户未输入重量，则会出现错误消息，提示他们请输入重量。
如果未输入高度，则会出现一条错误消息，提示他们请输入高度。
如果您是男性，您的 BMR 计算为：BMR = 10*(体重+6.25) (身高-5) (年龄+5)。
如果您是女性，您的 BMR 计算为：BMR = 10*(体重+6.25) (身高-5) (年龄-161)。
如果BMI小于18.5：“你太瘦了”。
如果 BMI 在 20 到 25 之间：“你很健康”。
如果 BMI 大于 25：“你超重”。

另外，请不要搁置或删除问题。 这对我很重要，我需要帮助。 如果你需要帮助，请不要。 写这个问题花了我很长时间。

这是我应该为其编写 javascript 代码的 html：

<html>
<head>
  <title> BMI Calculator </title>
  <style>
    label {
      display: inline-block;
      width: 80px;
      height: 25px;
    }
    button {
      height:30px;
      margin: 5px 0px;
    }
    fieldset {
      display: inline-block;
    }
    #errMsg {
      color: red;
    }
    #frm {
      float: left;
      width: 30%;
    }
    #imgSec {
      float: left;
      padding: 5px 0px;
      border-left: 3px solid darkblue;
    }
  </style>
  <!-- link to javascript file -->
  <script type="text/javascript" src="BMI_javascript.js">
  </script> 
</head>
<body>
  <div id="title"><h3>BMI Calculator</h3></div>
  <section id="frm">
    <form name="bmiForm" onsubmit="return false;">
      <fieldset>
        <legend>Enter your Details:</legend>
        <label for="user">Name:</label>
        <input type="text" id="user" size="25" required> <br />
        <label for="gender">Gender:</label>
        <input type="radio" id="rbMale" name="gender"> Male 
        <input type="radio" id="rbFemale" name="gender">Female  <br />
        <label for="age">Age:</label>
        <input type="number" id="age" size="10" required> <br />
        <label for="weight">Weight(kg):</label> 
        <input type="number" id="weight" size="10" required> <br />
        <label for="height">Height(cm):</label>
        <input type="number" id="height" size="10" required> <br />
        <div id="errMsg"></div>
      </fieldset>
      <br>
      <button onclick="calculate()">Calculate BMI</button>
      <button type="reset" onclick="clearErr()">Reset</button>
      <br>
      <fieldset>
        <legend>Result:</legend>
        <label for="bmr">Your BMR: </label>
        <input type="text" name="bmr" id="bmr" size="18" readonly><br />
        <label for="bmi">Your BMI: </label>
        <input type="text" name="bmi" id="bmi" size="10" readonly><br />
        <label for="meaning">This Means: </label>
        <input type="text" name="meaning" id="meaning" size="25" readonly><br/>
      </fieldset>
    </section>
    <section id="imgSec">
      <img id="img" src="" height="250px">     
    </section>
  </form>
</body>
</html>

这是我为它编写的 javascript。 我知道这很可怕。 问题是代码不起作用。 什么都行不通。

 function GenderType() {
   var GenderType = document.getElementsByName("rbMale","rbFemale");

   if(rbMale == "Male") {
     GenderType.innerHTML = "Male";
   } else {
     rbFemale == "Female";
     GenderType.innerHTML = "Female";
   }     
 }

 function validate() {
   var name = document.getElementById("name");
   var age = document.getElementById("age");
   var male = document.getElementById("male");
   var female = document.getElementById("female");
   var weight = document.getElementById("weight");
   var height = document.getElementById("height");          

   error = false;

   var reName = /^[a-zA-Z ]{5,}$/;
   if (reName.test(name.value) == false) {
     nameError.innerHTML = "Name must be eight letters or more";
     error = true;
   } else {
     nameError.innerHTML = "";
   }

   age = parseInt(age.value);
   if ( isNaN(age)  || age < 0 || age > 65) {
     ageError.innerHTML = "Age must be in range 0-65";
     error = true;
   } else {
     ageError.innerHTML = "";
   }

   weight = parseInt(weight.value);
   if ( isNaN(weight) || weight < 0) {
     weightError.innerHTML = "Weight must be greater than 0";
     error = true;
   } else {
     weightError.innerHTML = "";
   }

   height = parseInt(height.value);
   if (isNaN(height) || height < 0) {
     heightError.innerHTML = "height must be greater than 0"
     error = true;
   } else {
     heightError.innerHTML = "";
   }

   if ( !male.checked & !female.checked) {
     genderError.innerHTML = "Select value";
     error = true;
   } else {
     genderError.innerHTML = "";    
   }                    
 }

 function BMRCalculate () {
   if ( validate()==false ) {
     var GenderType = document.getElementById("rbMale","rbFemale").value;
     var age = document.getElementById("age").value;
     var female = document.getElementById("rbFemale");
     var male = document.getElementById("rbMale");
     var weight = document.getElementById("weight");
     var height = document.getElementById("height");
     var BMIValue = weight/( (height/100)*(height/100) );
     var BMRValue;
     var ThisMeans = document.getElementById("meaning");

     if(GenderType == male) {
       BMRValue = 10*(weight+6.25)*(height-5)*(age+5);
     } else {
       GenderType = female;
       BMRValue = 10*(weight+6.25)*(height-5)*(age-161);
   }

   if (BMIValue<18.5) {
     ThisMeans = "you are too thin";
     document.write(ThisMeans);
   } else if (BMIValue>18.5 && BMIValue<25) {
     ThisMeans = "you are healthy";
     document.write(ThisMeans);
   } else {
     ThisMeans = "You are not healthy";
     document.write(ThisMeans);
   }
 }

Answer 1

伙计，@gavgrif 给了你一些非常好的提示，但关于代码......尝试重新开始并再次思考问题。

如何为 BMI_Calculator.html 编写 javascript 代码？

问题描述

1 个解决方案

解决方案1
0 2016-03-17 21:05:56

如何为 BMI_Calculator.html 编写 javascript 代码？

问题描述

1 个解决方案

解决方案1 0 2016-03-17 21:05:56

解决方案1
0 2016-03-17 21:05:56