Menu
I’m writing a program where a user can type in their weight, height, and age in order to find out how many calories they should eat if they want to maintain their weight. There’s one major issue though. Whenever I type in all the necessary information, the numbers appear as “NaN”. Here’s the code I wrote:
[code]<html>
<head>
<title>ITE154 BMR Calculator</title>
<style type=”text/css”>
body {
background-image: url(“http://newton.ncc.edu/gansonj/ite154/img/veggies_bkg.jpg”);
color: black;
font-family: comic sans ms;
}
#pagewrap {
border: 6px blue solid;
padding: 30px;
background-color: white;
width: 700px;
margin: 20px auto 0px auto;
border: 6px #81C6DD solid;
border-radius: 25px;
}
#contentwrap {
background: #99CCCC;
border: 6px #9E3B33 solid;
border-radius: 25px;
}
#header {
margin: 20px 20px 20px 20px;
text-align: center;
color: #ffffff;
background: #003399;
font-weight: bold;
font-size: 2em;
border-radius: 25px;
padding: 10px 0px 10px 0px;
}
#formwrap {
margin: 20px 20px 20px 20px;
height: 450px;
background: #CCCCCC;
border: 5px solid #9E3B33;
border-radius: 25px;
padding: 10px;
background-image: url(“http://newton.ncc.edu/gansonj/ite154/img/squash.png”);
background-repeat: no-repeat;
background-position: 375px 50px;
}
.formtext {
color: black;
margin-top: 8px;
}
.formfield {
padding: 5px;
background: #99CCCC;
color: black;
border: 2px #003399 solid;
border-radius: 25px;
font-weight: bold;
}
#calcbutton {
background: #E48743;
color: white;
cursor: pointer;
padding: 5px 0px 5px 0px;
border: 3px solid #90CA77;
width: 150px;
}
#calcbutton:hover {
background: #90CA77;
color: #000000;
border: 3px solid #E48743;
}
#footer {
margin: 20px 20px 20px 20px;
text-align: center;
color: white;
background: #003399;
font-weight: bold;
font-size: 1.45em;
border-radius: 25px;
padding: 20px 0px 20px 0px;
}
#output {
color: #003399;
}
</style>
<script src=”https://code.jquery.com/jquery-3.4.1.min.js” integrity=”sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=” crossorigin=”anonymous”></script>
<script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.min.js” integrity=”sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=” crossorigin=”anonymous”></script>
<script type=”text/javascript”>
$(document).ready( function() {
$(“#calcbutton”).on( “click”, function(){
var weight = parseFloat( $(“#weight”).val() );
var height = parseFloat( $(“#height”).val() );
var age = parseFloat( $(“#age”).val() );
var fbmi = 655 + (4.3 * weight) + (4.7 * height) – (4.7 * age);
var mbmi = 66 + (6.3 * weight) + (12.9 * height) – (6.8 * age);
var level = $(“activity”).val();
var fcalories = fbmi * percentage;
var mcalories = mbmi * percentage;
if (level = “level1”){
var perecntage = .20;
}
else if (level = “level2”){
var percentage = .37;
}
else if (level = “level3”){
var percentage = .55;
}
else{
var percentage = .70;
}
var msg = “<div>To maintain your current weight…</div>”;
msg += “<div>If you are female, you must eat” + fcalories + “calories</div>”;
msg += “<div>If you are male, you must eat” + mcalories + “calories</div>”;
msg += “<div>More calories a day will result in weight gain</div>”;
msg += “<div>Less calories a day will result in weight loss</div>”;
$(“#output”).html( msg );
});
} ); // ends document.ready
</script>
</head>
<body>
<div id=”pagewrap”>
<div id=”contentwrap”>
<div id=”header”>
The Nifty ITE154 Calorie Counter
</div>
<div id=”formwrap”>
<form>
<div class=”formtext”>Enter your weight (pounds)</div>
<input type=”text” class=”formfield” id=”weight” size=”40″ value=”150″ />
<div class=”formtext”>Enter your height (inches)</div>
<input type=”text” class=”formfield” id=”height” size=”40″ value=”66″ />
<div class=”formtext”>Enter your age (years)</div>
<input type=”text” class=”formfield” id=”age” size=”40″ value=”44″ />
<div class=”formtext”>Select your activity level (1-4)</div>
<select id=”activity” class=”formfield”>
<option value=”level1″>Level 1 – Sedentary – little or no exercise</option>
<option value=”level2″>Level 2 – Lightly Active – exercise 1-3 times/week</option>
<option value=”level3″>Level 3 – Moderately Active – exercise 3-5 times/week</option>
<option value=”level4″>Level 4 – Very Active – exercise 6-7 times/week</option>
</select>
<div style=”margin-top:20px;”>
<input type=”button” value=”Calculate Calories” id=”calcbutton” />
</div>
</form>
<div id=”output”></div>
</div> <!– ends div#formwrap –>
<div id=”footer”>
Thanks for visiting!
</div>
</div> <!– ends div#contentwrap –>
</div> <!– ends div#pagewrap –>
</body>
</html>
[code]