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

Todos os trs estão sendo validados

Acompanhando a vídeo-aula, após inserir o peso 10000 na <td> do paciente Paulo, ao invés de apenas a td dele acusar que peso era inválido, todas as tds da tabela acusaram. Não consigo encontrar o erro que está causando isso.

Segue o código:

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

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


//Percorrendo e Validando o peso e altura de todos os pacientes
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;


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

    //Validando o peso
    /* Testando se o peso é falso */
    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
    else if(altura <= 0 || altura >= 3.00) {

        //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 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);
}
// Selecionando e Capturando um Elemento html (botão)
var botao = document.querySelector("#adicionar-paciente");


//Adicionando um Evento ao Botão e uma função a ser executada no clique
botao.addEventListener("click", function(event) {

    //Evitando o comportamento padrão de um botão (enviar os dados e recarregar a página)
    event.preventDefault();


    //Selecionando e Capturando um Elemento (form)
    var form = document.querySelector("#form-novo-paciente");


    /* Chamando e armazenando o objeto(paciente) */
    var paciente = obtemPacienteDoFormulario(form);
    console.log(paciente);


    //Chamando a Função que recebe um objeto e monta uma tr com os dados do objeto
    var pacienteTr = montaTr(paciente);


    //Selecionando e Capturando a tabela
    var tabela = document.querySelector("#tabela-pacientes");
    //Inserindo o Novo elemento (tr) na tabela
    tabela.appendChild(pacienteTr);


    //Limpando os inputs do formulário
    form.reset();
});


//Declarando a Função que Seleciona e Captura O TEXTO dos inputs do form ATRAVÉS DO NAME
function obtemPacienteDoFormulario(form) {

    //Criando um objeto (paciente)
    var paciente = {

        //Propriedades do Objeto, extraídas dos valores dos inputs do form
        nome: form.nome.value,
        peso: form.peso.value,
        altura: form.altura.value,
        gordura: form.gordura.value,
        //Reutilizando a função calculaImc
        imc: calculaImc(form.peso.value, form.altura.value)
    }

    //Retorna o objeto com todas as suas propriedades
    return paciente;
}


//Declarando a Função que recebe um objeto e monta uma tr já com os dados do objeto
function montaTr(paciente) {

    //Criando uma TR
    var pacienteTr = document.createElement("tr");
    //Adicionando uma Classe à TR
    pacienteTr.classList.add("paciente");

    //Inserindo os TDS como filhos do TR
    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"));

    //Retornando a TR criada
    return pacienteTr;
}


//Declarando a função que monta um td
function montaTd(dado, classe) {

    //Criando um elemento html (td)
    var td = document.createElement("td");

    //Inserindo um Dado no elemento criado
    td.textContent = dado;

    //Inserindo uma classe no elemento
    td.classList.add(classe);

    //Retorna o elemento criado e montado
    return td;
}


/* Função que valida o paciente (objeto paciente como parâmetro) */
function validaPaciente(paciente) {

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

        return true;
    }
}
<!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">10000</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>

        <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>
2 respostas
solução!

Na hora que você percorre todos os itens, você chama a variavel pesoValido que foi criada fora do loop for

//Percorrendo e Validando o peso e altura de todos os pacientes
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;
    //Guardando se o peso e altura são válidos (true or false)
    var pesoValido = validaPeso(peso);

...

Espero ter ajudado :)

Ajudou d+ Mario. Obrigado.