Solucionado (ver solução)
Solucionado
(ver solução)
10
respostas

O Imc não calcula mais.

Já olhei até de cabeça para baixo esse código e não sei porque ele não calcula mais o imc.

Me ajudem por favor :)

var titulo = document.querySelector(".titulo");
titulo.textContent = "Aparecida Nutricionista";

// Selecionando e Guardando os elementos (TRS) com a classe "paciente"
var pacientes = document.querySelectorAll(".paciente");

//Percorrendo e validando o peso e altura de todos os pacientes
for (var i = 0; i < pacientes.length; i++) {

    var paciente = pacientes [i];

    //Selecionando e Guardando O TEXTO com o peso dos pacientes
    var tdPeso = paciente.querySelector(".info-peso");
    var peso = tdPeso.textContent;

    //Selecionando e Guardando O TEXTO com a altura dos pacientes
    var tdAltura = paciente.querySelector(".info-altura");
    var altura = tdAltura.textContent;

    var tdImc = paciente.querySelector(".info-imc");

    //Guardando se o peso e altura são válidos (true or false)
    var pesoEhValido = validaPeso(peso);
    var alturaEhValida = validaAltura(altura);

    //Validando o peso
    /* Testando se o peso é falso */
    if (!pesoEhValido){
            console.log("Peso inválido!");
            //Atribuindo um boolean
            pesoEhValido = false;
            //Exibindo a mensagem de erro no TD do Imc
            tdImc.textContent = "Peso inválido";
            //Acessando uma classe e Adicionando-a ao elemento
            paciente.classList.add("paciente-invalido");
    }
    //Validando a altura
    if (!alturaEhValida){
            console.log("Altura inválida!");
            //Atribuindo um boolean
            alturaEhValida = false;
            //Exibindo a mensagem de erro no TD do Imc
            tdImc.textContent = "Altura inválida";
            //Acessando uma classe e Adicionando-a ao elemento
            paciente.classList.add("paciente-invalido");
    }
    //Validando peso e altura
    if (pesoEhValido && alturaEhValida) {
         //Guardando a fórmula de Cálculo do imc
            var imc = calculaImc(peso, altura);
            //Exibindo o texto com o Cálculo do Imc, no TD do IMC
            tdImc.textContent = imc;
    }

    //Função que Calcula o Imc
    function calculaImc(peso, altura) {                               
        var imc = 0;  //Capturando a fórmula do Imc utilizando os parâmetros
        imc = peso / (altura * altura);  //Retorno o imc com limite de casas decimais
        return imc.toFixed(2);
    }


    /* Função que valida o peso */
    function validaPeso(peso) {
        if (peso > 0 && peso <= 1000) {
            return true;
        } else {
            return false;
        }
    }

    function validaAltura(altura){

        if (altura > 0 && altura <= 3.0){
            return true;
        } else {
            return false;
        }
    }
}
10 respostas

Boa noite Bianca,

Testei seu código e ele funcionou normalmente, ou seja, o erro não está nessa parte dó código. Segue aqui o exemplo que usei pra testar. Usei seu código com os arquivos do projeto final e consegui adicionar um paciente na tabela com o IMC calculado.

Dê uma olhada no form.js e no seu index.html. Se não achar o erro poste esses arquivos aqui.

abraços

Vou postar o Html porque eu olhei e não encontrei o erro.

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Aparecida Nutrição</title>
        <link rel="icon" href="favicon.ico" type="image/x-icon">
        <link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/index.css">

    </head>
    <body>

        <header>
            <div class="container">
                <h2 class="titulo">Aparecida Nutrição</h2>
            </div>
        </header>
        <main>
            <section class="container">
                <h2>Meus pacientes</h2>
                <table>
                    <thead>
                        <tr>
                            <th>Nome</th>
                            <th>Peso(kg)</th>
                            <th>Altura(m)</th>
                            <th>Gordura Corporal(%)</th>
                            <th>IMC</th>
                        </tr>
                    </thead>
                    <tbody id="tabela-pacientes">
                        <tr class="paciente" id="primeiro-paciente">
                            <td class="info-nome">Paulo</td>
                            <td class="info-peso">100</td>
                            <td class="info-altura">2.00</td>
                            <td class="info-gordura">10</td>
                            <td class="info-imc">0</td>
                        </tr>

                        <tr class="paciente" >
                            <td class="info-nome">João</td>
                            <td class="info-peso">80</td>
                            <td class="info-altura">1.72</td>
                            <td class="info-gordura">40</td>
                            <td class="info-imc">0</td>
                        </tr>

                        <tr class="paciente" >
                            <td class="info-nome">Erica</td>
                            <td class="info-peso">54</td>
                            <td class="info-altura">1.64</td>
                            <td class="info-gordura">14</td>
                            <td class="info-imc">0</td>
                        </tr>

                        <tr class="paciente">
                            <td class="info-nome">Douglas</td>
                            <td class="info-peso">85</td>
                            <td class="info-altura">1.73</td>
                            <td class="info-gordura">24</td>
                            <td class="info-imc">0</td>
                        </tr>
                        <tr class="paciente" >
                            <td class="info-nome">Tatiana</td>
                            <td class="info-peso">46</td>
                            <td class="info-altura">1.55</td>
                            <td class="info-gordura">19</td>
                            <td class="info-imc">0</td>
                        </tr>
                    </tbody>
                </table>

            </section>
        </main>
        <section class="container">
    <h2 id="titulo-form">Adicionar novo paciente</h2>
    <ul id="mensagens-erro">

    </ul>
    <form id="form-adiciona">
        <div class="grupo">
            <label for="nome">Nome:</label>
            <input id="nome" name="nome" type="text" placeholder="digite o nome do seu paciente" class="campo">
        </div>
        <div class="grupo">
            <label for="peso">Peso:</label>
            <input id="peso" name="peso" type="text" placeholder="digite o peso do seu paciente" class="campo campo-medio">
        </div>
        <div class="grupo">
            <label for="altura">Altura:</label>
            <input id="altura" name="altura" type="text" placeholder="digite a altura do seu paciente" class="campo campo-medio">
        </div>
        <div class="grupo">
            <label for="gordura">% de Gordura:</label>
            <input id="gordura" type="text" placeholder="digite a porcentagem de gordura do seu paciente" class="campo campo-medio">
        </div>

        <button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
    </form>
</section>

        <script src="js/calculaImc.js" ></script>
        <script src="js/form.js" ></script>

    </body>
</html>

Boa noite, Bianca.

Apenas o IMC dos pacientes que você insere no form que não está sendo calculado, certo? Pois, testei o seu index.html junto com o seu calcula-imc.js e para os pacientes que já estão no html o cálculo é feito corretamente.

Então, o erro deve estar no seu form.js. Você está incluindo as classes certas (info-nome, info-peso, etc) nos elementos 'td' que você está criando?

Boa noite Bianca,

Adicionei seu HTML ao exemplo e o Imc continua a ser calculado e adicionado na tabela.

Agora poste o form.js.

olha o form.js aí:


var botaoAdicionar = document.querySelector("#adicionar-paciente");
botaoAdicionar.addEventListener("click",function(event) {
    event.preventDefault();



    var form = document.querySelector("#form-adiciona");
    var paciente = obtemPacienteDoFormulario(form);
    var pacienteTr = montaTr(paciente);
    var erros = validaPaciente(paciente);
    if(erros.length > 0){
        exibeMensagensDeErro(erros);
        return;
}

    if (!validaPaciente(paciente)) {
        console.log("Paciente Inválido");
        return;
    }

    var tabela = document.querySelector("#tabela-pacientes");
    tabela.appendChild(pacienteTr);
    form.reset();

    var mensagensErro = document.querySelector("#mensagens-erro");
    mensagensErro.innerHTML = "";

});


function exibeMensagensDeErro(erros){
    var ul = document.querySelector("#mensagens-erro");
    ul.innerHTML = "";
    erros.forEach(function(erro){
        var li = document.createElement("li");
        li.textContent = erro; 
        ul.appendChild(li);
    });
}


function obtemPacienteDoFormulario(form) {

        var paciente = {
            nome: form.nome.value,
            peso: form.peso.value,
            altura: form.altura.value,
            gordura: form.gordura.value,
            imc: calculaImc(form.altura.value, form.peso.value)
        }
        return paciente;
}

function validaPaciente(paciente) {

    var erros = [];

    if(paciente.nome.length == 0) { 
        erros.push("O nome não pode ser em branco"); 
    }

    if (paciente.gordura.length == 0){
        erros.push("A gordura não pode ser em branco");
    }

    if (paciente.peso.length == 0){
        erros.push("O peso não pode ser em branco");
    }

    if (paciente.altura.length == 0){
        erros.push("A altura não pode ser em branco");
    }

    if (!validaPeso(paciente.peso)) {
        erros.push("Peso é inválido")
    }

    if (!validaAltura(paciente.altura)) {
        erros.push("Altura é inválida!")
    }
        return erros;
}

function montaTr(paciente) {
    var pacienteTr = document.createElement("tr");
    pacienteTr.classList.add("paciente");


    pacienteTr.appendChild(montaTd(paciente.nome, "info-nome"));
    pacienteTr.appendChild(montaTd(paciente.peso, "info-peso"));
    pacienteTr.appendChild(montaTd(paciente.altura, "info-altura"));
    pacienteTr.appendChild(montaTd(paciente.gordura, "info-gordura"));
    pacienteTr.appendChild(montaTd(paciente.imc, "info-imc"));


    return pacienteTr;

}

function montaTd(dado, classe){
    var td = document.createElement("td");
    td.textContent = dado;
    td.classList.add(classe);

    return td;
}

Exatamente Patrick, isso mesmo que está acontecendo. Apenas os pacientes que adiciono não calcula o imc.

Adicionei seu form.js ao exemplo e tudo continua funcionando. Nesse codepen acima todo o código foi postado por você, exceto o css. Mas duvido que o css seja a causa do erro.

Clique com o botão direito no navegador e clique em inspecionar, abra a aba "console" e verifique se aparece algum erro quando você tenta adicionar um paciente.

solução!

Bianca, boa tarde.

Acredito que descobri o problema.

A sua função calculaIMC recebe como parâmetros Peso e Altura, nessa ordem. Porém, ao chamar esta função no seu form.js, na função obtemPacienteDoFormulario, você está mandando os parâmetros na ordem inversa:

imc: calculaImc(form.altura.value, form.peso.value)

Apenas, inverta a ordem dos parâmetros:

imc: calculaImc(form.peso.value, form.altura.value)

A sua função está calculando direitinho.

Caramba Patrick, só você mesmo pra ver isso. Era isso mesmo! Valeu ein. Que felicidade. Obrigadão.

Oi Bianca. Que bom que consegui te ajudar.

Esses erros são sempre os mais difíceis de encontrar. Sempre é alguma besteirinha que a gente deixa passar.

Confesso que pra ajudar a encontrar esse erro, o debug de javascript que vem no Chrome me foi muito útil. A alura tem esse curso aqui que ajuda a mexer na ferramenta: https://www.alura.com.br/curso-online-chrome-devtools.

Mas com uma pesquisada rápida no google você encontra alguns artigos que explica como debugar javascript no chrome, ou em outro navegador. ;)