如何為 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