表单不验证输入



我正在尝试验证这些值,但由于某些原因,它没有验证它们,而是计算它们。我真的很困惑,不知道该怎么办。其他一切都很好。这是一个计算器。我正在尝试验证这些值,但由于某种原因,它没有验证它们,而是计算它们。我真的很困惑,不知道该怎么办。其他一切都很好。这是一个计算器。

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>

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;
}

相关内容

  • 没有找到相关文章

最新更新