Function to call other and popular inputs

Question

In my view I have several functions where in my current logic, they work like this: I fill the data previously and I have 4 buttons that I click and they will do some accounts.

What happens is that I wanted to be able to call all the functions at once and do the right calculations, but just by clicking on a button...

My codes are:

 <div class="form-group">
                @Html.LabelFor(model => model.AccSuprailiaca, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.AccSuprailiaca, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.AccSuprailiaca, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.AccTriciptal, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.AccTriciptal, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.AccTriciptal, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.AccSubescaputar, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.AccSubescaputar, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.AccSubescaputar, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.AccAbdominal, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.AccAbdominal, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.AccAbdominal, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.AccCoxa, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.AccCoxa, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.AccCoxa, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.AccPanturilha, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.AccPanturilha, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.AccPanturilha, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.AccPeitoral, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.AccPeitoral, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.AccPeitoral, "", new { @class = "text-danger" })
                </div>
            </div>

First, I fill the text boxes with the data, the one above... And right after I use them to make the following calculations:

<div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="button" onclick="calcula_percentualGordura();" value="Calcular" class="btn btn-default" />
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.AccPercentualGordura, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.AccPercentualGordura, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.AccPercentualGordura, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="button" onclick="calcula_percentualMassaMagra();" value="Calcular" class="btn btn-default" />
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.AccMassaMagra, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.AccMassaMagra, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.AccMassaMagra, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="button" onclick="calcula_gordura();" value="Calcular" class="btn btn-default" />
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.AccPrcentualGorduraQuilos, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.AccPrcentualGorduraQuilos, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.AccPrcentualGorduraQuilos, "", new { @class = "text-danger" })
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="button" onclick="calcula_massaMagra();" value="Calcular" class="btn btn-default" />
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.AccMassaMagraQuilos, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.AccMassaMagraQuilos, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.AccMassaMagraQuilos, "", new { @class = "text-danger" })
                </div>
            </div>

Here I can only popular the data after having filled in the data previously and to fill in the above fields, notice, I need to click 4 different buttons...

There would be a way to create a function that encompasses all the functions called in the 4 buttons at once, I mean, in a button?

My duties:

  function calcula_percentualGordura() {

        //pegando os valores dos campos
        var sexo = document.getElementById("AccSexo");
        var sexoValor = sexo.value;

        var idade = document.getElementById("AccIdade");
        var idadeValor = idade.value;

        var percentualGordura = document.getElementById("AccPercentualGordura");
        var percentualGorduraValor = percentualGordura.value;

        var suprailiaca = document.getElementById("AccSuprailiaca");
        var suprailiacaValor = suprailiaca.value;

        var triciptal = document.getElementById("AccTriciptal");
        var triciptalValor = triciptal.value;

        var subEscapular = document.getElementById("AccSubescaputar");
        var subEscapularValor = subEscapular.value;

        var abdominal = document.getElementById("AccAbdominal");
        var abdominalValor = abdominal.value;

        var coxa = document.getElementById("AccCoxa");
        var coxaValor = coxa.value;

        var panturilha = document.getElementById("AccPanturilha");
        var panturilhaValor = panturilha.value;

        var peitoral = document.getElementById("AccPeitoral");
        var peitoralValor = peitoral.value;

        var equacao;

        var totalCampos = Number(suprailiacaValor) + Number(triciptalValor) + Number(subEscapularValor) +
                          Number(abdominalValor) +
                          Number(coxaValor) + Number(panturilhaValor) + Number(peitoralValor);

        var quadrado = totalCampos * totalCampos;

        if(sexoValor == "Masculino"){
            equacao = Number(1.112) - Number(0.00043499) * (totalCampos) +
                                            Number(0.00000055) *
                                            (quadrado) -
                                            (Number(0.0002882) * Number(idadeValor))
        } else {
            if (sexoValor == "Feminino") {
                equacao = Number(1.097) - Number(0.00046971) * (totalCampos) +
                                           Number(0.00000056) *
                                           (quadrado) -
                                           (Number(0.00012828) * Number(idadeValor))
            }
        }

        var percentual = Number((4.95 / equacao) - Number(4.5)) * 100;

        percentualGordura.value = percentual.toFixed(2);

    }

    function calcula_percentualMassaMagra() {

        var massaMagra = document.getElementById("AccMassaMagra");
        var massaMagraValor = massaMagra.value;

        var percentualGordura = document.getElementById("AccPercentualGordura");
        var percentualGorduraValor = percentualGordura.value;

        var massaMagraConta = Number(100) - Number(percentualGorduraValor);

        massaMagra.value = massaMagraConta.toFixed(2);
    }

    function calcula_gordura() {

        var peso = document.getElementById("AccPeso");
        var pesoValor = peso.value;

        var percentualGordura = document.getElementById("AccPercentualGordura");
        var percentualGorduraValor = percentualGordura.value;

        var percentualGorduraQuilos = document.getElementById("AccPrcentualGorduraQuilos");
        var percentualGorduraQuilosValor = percentualGorduraQuilos.value;

        var pesoquilosConta = Number(pesoValor) * Number(percentualGorduraValor) / 100;

        percentualGorduraQuilos.value = pesoquilosConta.toFixed(2);
    }

    function calcula_massaMagra() {

        var peso = document.getElementById("AccPeso");
        var pesoValor = peso.value;

        var massaMagra = document.getElementById("AccMassaMagra");
        var massaMagraValor = massaMagra.value;

        var massaMagraQuilos = document.getElementById("AccMassaMagraQuilos");
        var massaMagraQuilosValor = massaMagraQuilos.value;

        var massaMagraQuilosConta = Number(pesoValor) * Number(massaMagraValor) / 100;

        massaMagraQuilos.value = massaMagraQuilosConta.toFixed(2);
    }

Answer 1

In the button click event you can put a function calculates() and inside it only the call of the other functions you made. Something more or less like this:

$( "button" ).click(function() {
  calcula_massaMagra();
  calcula_gordura();
});

Answer 2

Using only javascript you can create a function to call all others, as you are already doing.

 function calcula_tudo() {
      calcula_percentualGordura()
      calcula_massaMagra();
      calcula_gordura();
      calcula_percentualMassaMagra()  
    }

And in his button you call this function on onclick().

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="button" onclick="calcula_tudo();" value="Calcular" class="btn btn-default" />
                </div>
            </div>

It is worth noting that you are doing four different calculations, so the ideal is to have the four functions as you have already done.
If you are using jquery, may use the @user5988 that will work normally.