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

Stack Overflow用户

提问于 2016-03-17 20:19:34

回答 1查看 3.1K关注 0票数 0

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

人输入姓名，选择性别，输入体重和身高。应用程序将计算人的BMR，BMI，并告诉它的含义(即说“你太瘦”，“你是健康的”，或“你超重”)。它将显示一个瘦弱、健康或超重的人的图像，这是一幅png图像。
如果它们不输入名称，则会收到错误消息，提示它们输入名称。该名称必须至少有五个字符长。
如果他们不选择性别，那么错误信息会提示他们请选择性别。性别用单选按钮表示。用户选择男性或女性。
如果用户不输入权重，则错误消息会提示用户输入权重。
如果未输入高度，则会出现错误消息，提示它们请输入高度。
如果你是男性，你的BMR计算为: BMR =10*(weight+6.25)(身高-5)(age+5)。
如果您是女性，BMR计算为: BMR =10*(weight+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);
   }
 }

javascript

html

回答 1

Stack Overflow用户

发布于 2016-03-17 21:05:56

“伙计，”gavgrif给了你一些很好的建议，但是关于code...try，我们要重新考虑一下这个问题。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36070913

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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