Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.

# Thread: Need Help Please - new at JavaScript

1. ## Need Help Please - new at JavaScript

I am a newbie to JavaScript. Below is a body mass index calculator that I need to add an alert if someone adds text into the inputs of height or weight. I can't work out how to do it. And help would be greatly aprreciated.

<html>

<head>

<title>Body Mass Index (BMI) Calculator</title>
<script language="JavaScript">
//Variables Input

<!--
function calcBmi() {
var weight = document.bmiForm.weight.value //Input of Weight

var height = document.bmiForm.height.value //Input of Height

//Calculation of BMI

if(weight > 0 && height > 0){
var finalbmi = weight/(height/100*height/100)
document.bmiForm.finalbmi.value = finalbmi
document.bmiForm.finalbmi.value = new Number(finalbmi).toFixed(2);

}
//Highlighted Decisions are made below

if(finalbmi < 17.999){
document.getElementById('tr1').style.backgroundColor="yellow";
}
else{
document.getElementById('tr1').style.backgroundColor="white";
}
if(finalbmi > 18 && finalbmi < 19.999){
document.getElementById('tr2').style.backgroundColor="yellow";
}
else{
document.getElementById('tr2').style.backgroundColor="white";
}
if(finalbmi > 20 && finalbmi < 24.999){
document.getElementById('tr3').style.backgroundColor="yellow";
}
else{
document.getElementById('tr3').style.backgroundColor="white";
}
if(finalbmi > 25 && finalbmi < 29.999){
document.getElementById('tr4').style.backgroundColor="yellow";
}
else{
document.getElementById('tr4').style.backgroundColor="white";
}
if(finalbmi > 30){
document.getElementById('tr5').style.backgroundColor="yellow";
}
else{
document.getElementById('tr5').style.backgroundColor="white";
}

}

</script>
<style>
.container {
width: 100%;
}
.wrapper {
border-style: solid;
border-width: 1px;
margin: 0 auto;
width: 600px;
}
table {
width: 540px;
margin: 0 auto;
font-size: 100%;
}
form {
text-align: center;
}
</style>
</head>

<body>
<div class="container">
<div class="wrapper">
<form name="bmiForm">
<h3> Body Mass Index (BMI) Calculator</h3>

<p>
Height(cm): <input type="text" name="height" size="11"><br />

Weight(kg): <input type="text" name="weight" size="11"><br />

<input type="button" value="Button" onClick="calcBmi()">
</p><br/>

<p>
Your BMI is: <input type="text" name="finalbmi" size="11"><br />
</p>

<table id="bmitable" border="1" width="40%">
<tr id='tr1'>
<td>Under 18 - your are very underweight and possibly malnourished.</td>
</tr>
<tr id='tr2'>
<td>Under 20 - you are underweight and could afford to gain a little weight.</td>
</tr>
<tr id='tr3'>
<td>20 to 25 - you have a healthy weight range for a young and middle-aged adults.</td>
</tr>
<tr id='tr4'>
<td>26 to 30 - you are overweight.</td>
</tr>
<tr id='tr5'>
<td>Over 30 - you are obese</td>
</tr>
</table>
</form>
</div>
<div>
</body>

</html>

• You need to look at form validation and regex patterns. Plenty of examples online if you google.

• You also need to read the GD Sticky: HTML & CSS Posting Rules & Guidelines http://www.codingforums.com/html-css...uidelines.html Before posting:
Please read them now.

Code:
```<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Title of the document</title>
</head>

<body>
<form name="bmiForm">
<h3> Body Mass Index (BMI) Calculator</h3>

<p>
Height(cm): <input type="text" name="height" size="11"><span id="height_error" style="color:red;"></span> <br />

Weight(kg): <input type="text" name="weight" size="11"><span id="weight_error" style="color:red;"></span> <br />

<input type="button" value="Button" onClick="calcBmi()">
</p><br/>

<p>
Your BMI is: <input type="text" name="finalbmi" size="11"><br />
</p>
</form>

<script>
function calcBmi() {
var weight = document.bmiForm.weight.value //Input of Weight
if(isNaN(weight)) {document.getElementById('weight_error').innerHTML='Numbers only';}else{document.getElementById('weight_error').innerHTML='';}
var height = document.bmiForm.height.value //Input of Height
if(isNaN(height)) {document.getElementById('height_error').innerHTML='Numbers only';}else{document.getElementById('height_error').innerHTML='';}

if(weight > 0 && height > 0){
var finalbmi = weight/(height/100*height/100);
document.bmiForm.finalbmi.value = finalbmi;
document.bmiForm.finalbmi.value = new Number(finalbmi).toFixed(2);
}
}
</script>
</body>
</html>```

•

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•