表单不验证输入

Question

我正在尝试验证这些值，但出于某种原因它没有验证它们，而是无论如何都会计算它们。我真的很困惑，不知道该怎么做。其他一切都计算得很好。这是一个计算器。我正在尝试让这些值进行验证，但由于某种原因它不会验证它们并且无论如何都会计算它们。我真的很困惑，不知道该怎么做。其他一切都计算得很好。这是一个计算器。

var bmr = 0;

function validateForm() 
{
  var age = document.forms["calcBMR"]["age"].value;
  var height = document.forms["calcBMR"]["weight"].value;
  var weight = document.forms["calcBMR"]["height"].value;

  if (age == "") 
  {
    alert("Age must be filled out");
    return false;
  }
  
  if (height == "") 
  {
    alert("Height must be filled out");
    return false;
  }
  
  if (weight == "") 
  {
    alert("Height must be filled out");
    return false;
  }
 
    
}

function calc() {
  var age = document.getElementById("age").value;
  var gender = document.querySelector('input[name="gender"]:checked').value;
  var height = document.getElementById("height").value;
  var weight = document.getElementById("weight").value;
  var activeLevel = document.getElementById("activeLevel").value;
 
  switch(activeLevel)
    {
      case "sedentary":
        
      if(gender == "male")
      {
        bmr = 88.362 + ( 13.397 * weight ) + ( 4.799 * height )-( 5.677 * age );
        bmr = bmr * 1.2;
      }
      else
      {
        bmr = 447.593 + ( 9.247 * weight ) + ( 3.098 * height ) - ( 4.330 * age );
        bmr = bmr * 1.2;
      }
      return bmr;
      case "lightActive":
        if(gender == "male")
        {
          bmr = 88.362 + ( 13.397 * weight ) + ( 4.799 * height )-( 5.677 * age );
          bmr = bmr * 1.375;
        }
        else
        {
          bmr = 447.593 + ( 9.247 * weight ) + ( 3.098 * height ) - ( 4.330 * age );
          bmr = bmr * 1.375;
        }
        return bmr;

      case "moderateActive":
        if(gender == "male")
        {
          bmr = 88.362 + ( 13.397 * weight ) + ( 4.799 * height )-( 5.677 * age );
          bmr = bmr * 1.55;
        }
        else
        {
          bmr = 447.593 + ( 9.247 * weight ) + ( 3.098 * height ) - ( 4.330 * age );
          bmr = bmr * 1.55;
        }
        return bmr;

      case "veryActive":
        if(gender == "male")
        {
          bmr = 88.362 + ( 13.397 * weight ) + ( 4.799 * height )-( 5.677 * age );
          bmr = bmr * 1.725;
        }
        else
        {
          bmr = 447.593 + ( 9.247 * weight ) + ( 3.098 * height ) - ( 4.330 * age );
          bmr = bmr * 1.725;
        }
        return bmr;

      case "extraActive":
        if(gender == "male")
        {
          bmr = 88.362 + ( 13.397 * weight ) + ( 4.799 * height )-( 5.677 * age );
          bmr = bmr * 1.9;
        }
        else
        {
          bmr = 447.593 + ( 9.247 * weight ) + ( 3.098 * height ) - ( 4.330 * age );
          bmr = bmr * 1.9;
        }
        return bmr;
      
      default:
        if(gender == "male")
        {
          bmr = 88.362 + ( 13.397 * weight ) + ( 4.799 * height )-( 5.677 * age );
        
        }
        else
        {
          bmr = 447.593 + ( 9.247 * weight ) + ( 3.098 * height ) - ( 4.330 * age );
        
        }
        return bmr;
      }  
}


document.getElementsByTagName("button")[0].addEventListener("click", function() {
  calc();
  document.getElementById('lblResult').innerHTML = bmr;

})

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="Assignment1.css">    

<head>
  <meta name="viewport" content="width = device-width, initial-scale = 1.0">
  <title>Assignment 1 - BMR Calculator</title>
</head>
<body>
  
   <div id="wrapper">
    <div class="module-border-wrap"><div class="module">
    <header>
      
      <h1>BMR Calculator</h1>
    </div></div>
    </header>
    <br><h4><strong>What is BMR?:</strong></h4>
       Basal Metabolic Rate (BMR) is your metabolism rate. It calculates the total amount of calories you should be eating per day based on Age, Height, Weight, and Gender.<br><br>

    <h4><strong>BMR versus BMI:</strong></h4>
    <p>While both take similar calculations, both are very different. Body Mass Index (BMI) takes your height and weight. </p>


    

    <br><br><img src="images/weight scale.jpg" class="size1" alt="Scale">&nbsp;&nbsp;&nbsp;
    <img src="images/outside.gif" class="size2" alt="Pixel art forest"><br><br>

    <h3>Take a BMR test right here to find the number of calories you need per day:</h3><br><br>

    <div id="centre">
     <form action="#" name="calcBMR" >
        
      <label for="gender">Gender:</label><br>
      <input type="radio" id="male" name="gender" value="male" required="required"> Male
      <input type="radio" id="female" name="gender" value="female" required="required"> Female<br><br>

      <label for="age">How old are you?</label><br>
      <input type="number" id="age" name="age" value="age" min="0" required="required"><br><br>
       
      <label for="height">What is your height in centimetres? (cm):</label><br>
      <input type="number" id="height" name="height" value="height" min="0" required="required"><br><br>
        
      <label for="weight">What is your weight in kilograms? (kg):</label><br>
      <input type="number" id="weight" name="weight" value="weight" min="0" required="required"><br><br>
     
      <label for="activeLevel">What is your Activity Level?: </label><br>
      <select id="activeLevel" name="activeLevel">
        <option value="sedentary">Sedentary (Little to no Exercise)</option>
        <option value="lightActive">Lightly Active (Exercise 1-3 times per week)</option>
        <option value="moderateActive">Moderately Active (Exercise 3-5 times per week</option>
        <option value="veryActive">Very Active (Exercise everyday)</option>
        <option value="extraActive">Extremely Active (Professional Athlete)</option>
      </select><br>
      
      <input type="reset" name="Reset"><br><br>
    
    
    </form>
     
      
      <button type="button"
      onclick="">
      Result</button><br>
      
      <textarea id="lblResult">BMR</textarea><br><br><br><br><br><br><br><br>
      
    </div>
    <footer>
      <hr><br><br>
      <h5>&copy; Copyright Alim Kutchhi #301135845 - COMP125 - Summer 2021.</h5><br><br>
    </footer>
     <script src="Assignment1.js"></script>
  
</div>
</body>

</html>

Answer 1

HTML:

<!DOCTYPE html>
<html>
<head>
<script src="Assignment1.js"></script>
<link rel="stylesheet" href="Assignment1.css">   
<meta name="viewport" content="width = device-width, initial-scale = 1.0">
<title>Assignment 1 - BMR Calculator</title>
</head>
<body>
<header>     
<h1>BMR Calculator</h1>
</div></div>
</header>
<br><h4><strong>What is BMR?:</strong></h4>
Basal Metabolic Rate (BMR) is your metabolism rate. It calculates the total amount of calories you should be eating per day based on Age, Height, Weight, and Gender.<br><br>

<h4><strong>BMR versus BMI:</strong></h4>
<p>While both take similar calculations, both are very different. Body Mass Index (BMI) takes your height and weight. </p>
<br><br><img src="images/weight scale.jpg" class="size1" alt="Scale">&nbsp;&nbsp;&nbsp;
<img src="images/outside.gif" class="size2" alt="Pixel art forest"><br><br>

<h3>Take a BMR test right here to find the number of calories you need per day:</h3><br><br>

<br>
<form name="getform" id="getform" action="" onsubmit="return false;">
<select name="gender" id="gender">
<option value="male" selected>Male</option>
<option value="female">Female</option>
</select>
<br><br>
How old are you?
<br>
<input type="text" id="age" name="age">
<br><br>
What is your height in centimetres? (cm):
<br>
<input type="text" id="height" name="height">
<br><br>
What is your weight in kilograms? (kg):
<br>
<input type="text" id="weight" name="weight">
<br><br>
What is your Activity Level?: 
<br>
<select id="activeLevel" name="activeLevel">
<option value="sedentary" selected>Sedentary (Little to no Exercise)</option>
<option value="lightActive">Lightly Active (Exercise 1-3 times per week)</option>
<option value="moderateActive">Moderately Active (Exercise 3-5 times per week</option>
<option value="veryActive">Very Active (Exercise everyday)</option>
<option value="extraActive">Extremely Active (Professional Athlete)</option>
</select>
<br><br>
<button type="button" id="reset" onclick="resetAll();">Reset</button>
<br><br><br>
<button type="button" id="result" onclick="getResult();">Result</button>
<br><br>
<input type="text" id="result_text" name="result_text" disabled style="background-color:#fff;border:1px solid black;" value="">
</form>

<footer>
<hr><br><br>
<h5>&copy; Copyright Alim Kutchhi #301135845 - COMP125 - Summer 2021.</h5><br><br>
</footer>
</body>
</html>

Javascript:

function calc() {
var age = parseInt(document.getform.age.value);
var height = parseFloat(document.getform.height.value);
var weight = parseFloat(document.getform.weight.value);
var gender = document.getform.gender.value;
var activeLevel = document.getform.activeLevel.value;
var error = '';
var bmr;
if (isNaN(age)) {
error+='Age must be filled out.';
}
if (isNaN(height)) {
error+=' Height must be filled out.';
} 
if (isNaN(weight)) {
error+=' Weight must be filled out';
}
if (error) {
alert(error);
return;
}
if (gender = "male") {
bmr = (10*weight) + (6.5*height) - (5*age) +5;
} else if (gender="female") {
bmr = (10*weight) + (6.5*weight) - (5*age) -161;
}
if (activeLevel =="sedentary") {
tdee = bmr * 1.2;
return tdee;
} else if (activeLevel == "lightActive") {
tdee = bmr * 1.375;
return tdee;
} else if (activeLevel == "moderateActive") {
tdee = bmr * 1.55;
return tdee;
} else if (activeLevel == "veryActive") {
tdee = bmr * 1.725;
return tdee;
} else if (activeLevel == "extraActive") {
tdee = bmr * 1.9;
return tdee;
}
}
function getResult() {
calc();
document.getform.result_text.value = calc();
}
function resetAll() {
document.getform.age.value = "";
document.getform.height.value = "";
document.getform.weight.value = "";
document.getElementById("gender").selectedIndex = 0;
document.getElementById("activeLevel").selectedIndex = 0;
}

表单不验证输入

Form does not validate inputs

html

javascript

validation

calculator