3
respostas

Novos imc são sempre 0.00

O calculo do imc funciona para os clientes antigos, mas para os novos sempre fica como zero.

//form.js

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 tabela = document.querySelector("#tabela-pacientes");

    tabela.appendChild(pacienteTr);



});

function obtemPacienteDoFormulario(form) {


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

    console.log(paciente.imc);
    return paciente;
}

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

//calcula-imc.js
var titulo = document.querySelector(".titulo");
titulo.textContent = "Aparecida Nutricionista";

var pacientes = document.querySelectorAll(".paciente");


for (let i = 0; i < pacientes.length; i++) {

    var paciente = pacientes[i];

    var tdPeso = paciente.querySelector(".info-peso");
    var peso = tdPeso.textContent;

    var tdAltura = paciente.querySelector(".info-altura");
    var altura = tdAltura.textContent;

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

    var pesoValido = true;
    var alturaValida = true;

    if (peso < 0 || peso > 300) {
        alert("Há pacientes com peso inválido!");
        pesoValido = false;
        tdImc.textContent = "Peso inválido!";
        paciente.classList.add("paciente-invalido");
    }

    if (altura < 0 || altura > 3){
        alert("Há pacientes com a altura inválida");
        alturaValida = false;
        tdImc.textContent = "Altura inválida!";
        paciente.classList.add("paciente-invalido");
    }

    if (pesoValido && alturaValida){
        var imc = calculaImc(peso, altura);
        tdImc.textContent = imc;
    }

    }

function calculaImc(peso, altura) {
    var imc = 0;
    imc = peso / (altura * altura);

    return imc.toFixed(2);
}
3 respostas

Oi Thiago!

Testei seu código aqui e rodou normalmente. A única forma que encontrei do imc dar sempre 0 foi invertendo os valores de peso e altura. Como seu código javascript está correto, suspeito que o erro esteja dentro do index.html.

Verifique se no index.html os inputs estão identificados corretamente e se não for isso, mande aqui o código HTML para que eu possa investigar melhor.

Aguardo seu retorno!

Segue o index.html

<!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">
                <h1 class="titulo">Aparecida Nutrição</h1>
            </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">48</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="conteiner">
            <h2 id="titulo-form">Adicionar paciente</h2>

            <form id="form-adiciona">
                <div class="grupo">
                    <label for="nome">Nome:</label>
                    <input id="nome" name="nome" type="text" placeholder="Digite o nome do paciente" class="campo">
                </div>

                <div class="grupo">
                    <label for="peso">Peso:</label>
                    <input id="peso" name="peso" type="text" placeholder="Digite o peso do 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 paciente" class="campo campo-medio">
                </div>

                <div class="grupo">
                    <label for="gordura">% de Gordura:</label>
                    <input id="gordura" name="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/calcula-imc.js"></script>
        <script src="js/form.js"></script>

    </body>
</html>

Oi Thiago!

Rodei seu código aqui e o imc está sendo calculado corretamente ao adicionar um novo paciente. O único "erro" que encontrei foi um erro de digitação na classe container na div em volta do form, que causou um pequeno deslocamento de layout.

Outra forma do resultado do IMC dar 0 é o valor de altura ser muito maior do que o de peso. Coloque valores de peso reais e lembre-se que a formatação da altura deve ser seguir este exemplo: "1.58".