0

Em minha view tenho várias funções em que na minha logica atual, funcionam assim: preencho os dados anteriormente e tenho 4 botões em que vou clicando e eles vão fazendo algumas contas.

O que acontece é que eu queria que eu conseguisse chamar todas as funções de uma vez só e fazer os cálculos certos, mas clicando somente em um botão...

Meus códigos são:

 <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>

Primeiramente, eu preencho os text boxes com os dados, esse ai de cima... E logo após eu os uso para fazer os calculos seguintes:

<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>

Aqui eu só posso popular os dados após ter preenchido os dados anteriormente e para preencher os campos acima, percebam, preciso clicar em 4 botões diferentes...

Haveria uma forma de criar uma função que abarcasse todas as funções chamadas nos 4 botões de uma vez só, digo, em um botão?

As minhas funções:

  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);
    }
2
  • No evento click do botão você pode colocar uma função calcula() e dentro dela só a chamada das outras funções que você fez.
    – user5988
    Commented 23/06/2016 às 6:45
  • Utilize button para chamar função, exemplo: <button onclick="calcula_massaMagra()">Massa Magra</button> é clicar para chamar calcula_massaMagra, necessario parenteses () e veja como funciona jsfiddle.net/KingRider/cv0xg456 e ate mais
    – KingRider
    Commented 23/06/2016 às 12:23

2 Respostas 2

0

Usando apenas você pode criar uma função para chamar todas as outras, como já está fazendo.

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

E em seu button você chama essa função no 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>

Vale ressaltar que você está fazendo quatro cálculos diferentes, por isso o ideal é ter as quatro funções como você já fez.
Caso esteja usando , pode utilizar a resposta do @user5988 que irá funcionar normalmente.

0

No evento click do botão você pode colocar uma função calcula() e dentro dela só a chamada das outras funções que você fez.Algo mais ou menos assim:

$( "button" ).click(function() {
  calcula_massaMagra();
  calcula_gordura();
});
1
  • Porque precisa chamar 2 funções? e veja comentário Erik disse "uma vez"
    – KingRider
    Commented 23/06/2016 às 12:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .