How to write javascript code for BMI_Calculator.html?

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). 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. That's all. I have copied the html page just in case you guys might wanna have a look at it. Here is what the BMI Calculator is supposed to do using 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"). and it will display an image of a thin, healthy, or overweight person which is a png image.
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).
If you are a female, you're BMR is calculated as: BMR = 10*(weight+6.25) (height-5) (age-161).
If the BMI is less than 18.5: "you are too thin".
If the BMI is between 20 to 25: "you are healthy".
If the BMI is greater than 25: "you are overweight".

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:

<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. 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 给了你一些非常好的提示，但关于代码......尝试重新开始并再次思考问题。

How to write javascript code for BMI_Calculator.html?

Question

1 answers

solution1
0 2016-03-17 21:05:56

How to write javascript code for BMI_Calculator.html?

Question

1 answers

solution1 0 2016-03-17 21:05:56

solution1
0 2016-03-17 21:05:56