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

Question

I'm supposed to write javascript code for an html page that will calculate a persons BMI and tell them what it means (the number).我应该为一个 html 页面编写 javascript 代码，该代码将计算一个人的 BMI 并告诉他们这意味着什么（数字）。 The rules of the test were to not change the html on the page, but to just write the javascript code and link it to the html page.测试的规则是不改变页面上的html，而只是编写javascript代码并将其链接到html页面。 That's all.就这样。 I have copied the html page just in case you guys might wanna have a look at it.我复制了 html 页面，以防你们想看一看。 Here is what the BMI Calculator is supposed to do using javascript:以下是 BMI 计算器应该使用 javascript 执行的操作：

Person enters name, selects gender, enters weight and height.人输入姓名，选择性别，输入体重和身高。 The application will calculate the persons BMR, BMI, and tell what it means (ie saying "you are too thin", "you are healthy", or "you are overweight").该应用程序将计算人的 BMR、BMI，并说明其含义（即说“你太瘦了”、“你很健康”或“你超重”）。 and it will display an image of a thin, healthy, or overweight person which is a png image.它将显示一个瘦的、健康的或超重的人的图像，这是一个 png 图像。
If they do not enter a name, an error message prompts them to enter a name.如果他们没有输入姓名，则会出现一条错误消息，提示他们输入姓名。 The name must be at least five characters long.名称的长度必须至少为五个字符。
If they do not select a gender, then an error message prompts them to please select a gender.如果他们没有选择性别，则会出现一条错误消息，提示他们请选择性别。 The gender is represented by a radio button.性别由一个单选按钮表示。 The user selects male or female.用户选择男性或女性。
If the user does not enter a weight, an error message prompts them to please enter a weight.如果用户未输入重量，则会出现错误消息，提示他们请输入重量。
If height is not entered, an error message prompts them to please enter a height.如果未输入高度，则会出现一条错误消息，提示他们请输入高度。
If you are a male, you're BMR is calculated as: BMR = 10*(weight+6.25) (height-5) (age+5).如果您是男性，您的 BMR 计算为：BMR = 10*(体重+6.25) (身高-5) (年龄+5)。
If you are a female, you're BMR is calculated as: BMR = 10*(weight+6.25) (height-5) (age-161).如果您是女性，您的 BMR 计算为：BMR = 10*(体重+6.25) (身高-5) (年龄-161)。
If the BMI is less than 18.5: "you are too thin".如果BMI小于18.5：“你太瘦了”。
If the BMI is between 20 to 25: "you are healthy".如果 BMI 在 20 到 25 之间：“你很健康”。
If the BMI is greater than 25: "you are overweight".如果 BMI 大于 25：“你超重”。

Also, please don't put the question on hold or delete it.另外，请不要搁置或删除问题。 This is important for me and I need help.这对我很重要，我需要帮助。 If you want help, please don't.如果你需要帮助，请不要。 It took me a long time to write this question.写这个问题花了我很长时间。

Here is the html that I am supposed to write the javascript code for:这是我应该为其编写 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>

And here is the javascript I wrote for it.这是我为它编写的 javascript。 I know it's horrible.我知道这很可怕。 The problem is the code does not work.问题是代码不起作用。 Nothing works.什么都行不通。

 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