I am creating a web app fitness that allows me to calculate the BMI and body fat percentage (BF) of a person, but the method that implements in JS does not work and I have no idea why.
This is the view with the JS:
@model IEnumerable<FitnessWebApplication.Models.Measurement>
@{
ViewBag.Title = "Index";
}
<h2>Your Measurements</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.Weight)
</th>
<th>
@Html.DisplayNameFor(model => model.Height)
</th>
<th>
@Html.DisplayNameFor(model => model.Neck)
</th>
<th>
@Html.DisplayNameFor(model => model.Waist)
</th>
<th>
@Html.DisplayNameFor(model => model.Taken)
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Weight) kg
</td>
<td>
@Html.DisplayFor(modelItem => item.Height) cm
</td>
<td>
@Html.DisplayFor(modelItem => item.Neck) cm
</td>
<td>
@Html.DisplayFor(modelItem => item.Waist) cm
</td>
<th>
@Html.DisplayFor(modelItem => item.Taken)
</th>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
@Html.ActionLink("Details", "Details", new { id = item.ID }) |
@Html.ActionLink("Delete", "Delete", new { id = item.ID })
</td>
</tr>
}
</table>
<hr />
<h1>Calculate</h1>
<hr />
<h2>BMI</h2>
<form>
<table>
<tr>
<td align="right"><b>Weight:</b></td>
<td align="left"><div class="col-xs-5"><input type="text" name="Weight" class="form-control" id="Weight" /></div><b>kg</b></td>
</tr>
<tr>
<td align="right"><b>Height:</b></td>
<td align="left"><div class="col-xs-5"><input type="text" name="Height" class="form-control" id="Height" /></div><b>cm</b></td>
</tr>
<tr>
<td align="right"><b>BMI:</b></td>
<td align="left"><div class="col-xs-4"><input type="text" name="BMI" class="form-control" id="BMIBox" /></div></td>
</tr>
</table>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="button" value="Calculate" class="btn btn-default" id="calculate" />
</div>
</div>
</form>
<hr />
<h2>BF% (aproximated)</h2>
<p>(All the measurements must be taken at the narrowest point)</p>
<form>
<table>
<tr>
<td><b>Male</b></td>
<td><input type="radio" name="Male" /></td>
<td><b>Female</b></td>
<td><input type="radio" name="Female" /></td>
</tr>
<tr>
<td align="right"><b>Height:</b></td>
<td align="left"><div class="col-xs-5"><input type="text" name="Height" class="form-control" /></div><b>cm</b></td>
</tr>
<tr>
<td align="right"><b>Waist:</b></td>
<td align="left"><div class="col-xs-5"><input type="text" name="Waist" class="form-control" /></div><b>cm</b></td>
</tr>
<tr>
<td align="right"><b>Hip:</b></td>
<td align="left"><div class="col-xs-5"><input type="text" name="Hip" class="form-control" /></div><b>cm</b></td>
</tr>
<tr>
<td align="right"><b>Neck:</b></td>
<td align="left"><div class="col-xs-5"><input type="text" name="Neck" class="form-control" /></div><b>cm</b></td>
</tr>
<tr>
<td align="right"><b>BF%:</b></td>
<td align="left"><div class="col-xs-4"><input type="text" name="BF%" class="form-control" /></div><b>%</b></td>
</tr>
</table>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="button" value="Calculate" class="btn btn-default" onclick="location.href='<%: @Url.Action("CalculateBF", "Measurements") %>'">
</div>
</div>
</form>
<script src="jquery.js"></script>
<script>
$('#calculate').click(function () {
var weight = Number($('#Weight').val());
var height = Number($('#Height').val());
var bmi = height / (weight * weight);
$('#BMIBox').val(bmi);
});
</script>