Calculate a parameter of a user with JS

0

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>
    
asked by Bryan Romero 19.08.2018 в 14:08
source

0 answers