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

Altura inválida

A altura do meu primeiro paciente está como inválida, mas não estou encontrando o erro no if...

Segue o código abaixo:

//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++) {

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


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

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


    //Selecionando e Guardando o TD do Imc
    var tdImc = pacientes[i].querySelector(".info-imc");

    /* Testando se o peso não é válido */
    if(!pesoValido) {

        //Atribuindo um boolean
        pesoValido = false;

        //Exibindo a mensagem de erro no TD do Imc
        tdImc.textContent = "Peso inválido";

        //Acessando uma classe e Adicionando-a ao elemento
        pacientes[i].classList.add("dado-tabela-invalido");
    }

    //Validando a altura
    /* Testando se a altura não é válida */
    if(!alturaValida) {

        //Atribuindo um boolean
        alturaValida = false;

        //Exibindo a mensagem de erro no TD do Imc
        tdImc.textContent = "Altura inválida";

        //Acessando uma classe e Adicionando-a ao elemento
        pacientes[i].classList.add("dado-tabela-invalido");
    }

    //Validando peso e altura
    if(pesoValido && alturaValida) {

        //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 valida o peso */
function validaPeso(peso) {

    if (peso >= 0 && peso <= 1000) {

        return true;
    }

    else {

        return false;
    }
}


/* Função que valida a altura */
function validaAltura(altura) {

    if (altura >= 0 && altura <= 3.00) {

        return true;
    }

    else {

        return false;
    }
}





//Função que Calcula o Imc
function calculaImc(peso, altura) {

    //Capturando a fórmula do Imc utilizando os parâmetros
    var imc = peso / (altura * altura);

    //Retorno o imc com limite de casas decimais
    return imc.toFixed(2);
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <title>Aparecida Nutricionista</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">
    <link rel="stylesheet" href="css/modificando_os_titulos.css">
</head>

<body>

    <!-- start Header -->
    <header>
        <div class="container">
            <h1 class="titulo-principal">Aparecida Nutrição</h1>
        </div>
    </header>
    <!-- end Header -->


    <!-- start Main -->
    <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>

                <!-- start Corpo Tabelas -->
                <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>
                <!-- end Corpo Tabelas -->

            </table>

        </section>

    </main>
    <!-- end Main -->

    <!-- start Form -->
    <section class="container">

        <h2 class="titulo-form">Adicionar novo paciente</h2>

        <span id="mensagem-erro"></span>

        <form id="form-novo-paciente">

            <div class="">
                <label for="nome">Nome:</label>
                <input autofocus 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" 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>
    <!-- end Form -->


    <!-- start Scripts -->
    <script src="js/index/modifica_textos.js"></script>
    <script src="js/index/calcula_imc.js"></script>
    <script src="js/index/form_novo_paciente.js"></script>
    <!-- end Scripts -->

</body>

</html>
6 respostas

Olá, Roger.

Na primeira iteração do seu for, nem a variável peso nem altura existem, fazendo com que a validação delas falhe.

Não entendi, poderia me explicar com mais detalhes?

Variável altura está sendo validada antes dela receber um valor

//Guardando se o peso e altura são válidos (true or false)
    var pesoValido = validaPeso(peso);
    var alturaValida = validaAltura(altura); // Você está validando a variavel altura antes mesmo dela ser criada


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

    //Selecionando e Guardando O TEXTO com a altura dos pacientes
    var altura = pacientes[i].querySelector(".info-altura").textContent; // variavel altura com valor aqui

Espero ter ajudado :)

solução!

Claro, Roger.

Observe o seu código:

   var pesoValido = validaPeso(peso); // Variável peso não existe
    var alturaValida = validaAltura(altura); // Variável altura não existe


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

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

As 2 variáveis passadas por parâmetro nas 2 funções das 2 primeiras linhas desse código não existem. Uma solução simples seria trocar a ordem das instruções. Ex.:

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

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

    var pesoValido = validaPeso(peso);
    var alturaValida = validaAltura(altura);

Se continuar com dúvida, é só falar!

Ah, sim. Declarei as variáveis antes da validação e deu certo. Obrigado, Mario e Carlos.

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

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

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


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

Por nada, Roger.

Dê uma pesquisada sobre use strict em javascript. Isso pode te ajudar numa hora dessas.

Abraços!