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

O código não verifica todos os pacientes

Eu tentei escrever o código o mais parecido o possível com o do professor porém quando eu o executo, apenas quando modifico o primeiro paciente (tanto a altura ou peso) que a classe é adicionada, quando eu faço com os demais ele calcula o Imc porém não aparece a mensagem de algo inválido nem aplica a classe pra modificar a cor de fundo.

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


for (var 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 pesoEhValido = true;
    var alturaEhValida = true;

    if (peso <= 0 || peso >= 1000) {
        console.log("Peso inválido");
        pesoEhValido = false;
        tdImc.textContent = "Peso Inválido";
        paciente.classList.add("paciente-invalido")
    }

    if (altura <= 0 || altura >= 3.00) {
        console.log("Altura inválida!");
        alturaEhValida = false;
        tdImc.textContent = "Altura Inválida!";
        paciente.classList.add("paciente-invalido")
    }

    if (alturaEhValida && pesoEhValido) {
        var imc = peso / (altura * altura);
        tdImc.textContent = imc.toFixed(2);
    }
}
7 respostas

Oi, Nicholas, tudo bem?

Com o código que você compartilhou aqui, me é correto. Você viu se no console do navegador apresenta alguma mensagem que possa indicar o porquê desse erro e se as classes que você chama no seu principal.js estão de acordo como no index.html?

Eu verifiquei, e os nomes batem com os outros arquivos, e cheguei até a baixar o arquivo zipado deste capítulo e testar o código, porém o erro ainda sim persiste, poderia ser um problema da minha máquina/ navegador/ editor? Uso o Visual Studio Code e o navegador to variando entre o Firefox e o Chrome.

Oi, Nicholas, muito pouco provável ser um problema do VSCode, da sua máquina ou dos navegadores.

Eu testei o seu código com o html do projeto do curso, e o imc dos demais pacientes verificados, segue o print: https://imgur.com/a/MDJiDNc

Verifique novamente os nomes das classes e dos ids, e compare seu código com o do professor também, ajuda a encontrar uma possível diferença. Caso queira, poste aqui o seu html.

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">
                <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">800</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>

        <script src="js/principal.js" ></script>

    </body>
</html>

CSS:

.....
.adicionar-paciente{
    margin-top: 30px;
}

.campo-invalido{
    border: 1px solid red;
}

.paciente-invalido {
    background-color: lightcoral;
}

E os nomes dos arquivos linkados no HTML estão todos corretos... Mas tipo, parece que a linha do Javascript onde tem o "||" como parâmetro do if, ele só é lido para o primeiro paciente, depois que ele confere, nos próximos esse if é ignorado ainda... Não aparece nada no console, mas o IMC funciona normalmente.

solução!

Oi, Nicholas, tudo bem?

Você testou os valores acima dos estabelecidos como válidos? No caso, peso maior que 1000 quilos e menor que 0 e altura maior que 3.00 metros e menor que 0? São com esses valores acima da condição da altura (altura <= 0 || altura >= 3.0) e para peso (peso <= 0 || peso >= 1000)

Tirei um print do teste do seu código e a condição é satisfeita:

https://imgur.com/a/CbJ6HM1

Testa e me fala se obteve o mesmo que consegui :}

Oiii, melhor agora!!! E vc? Poxa funcionou aqui!!! Muitooo obrigado aí pela ajuda, mudei essa parte e funcionou aqui!!! Sério valeu aí mesmo pela ajuda! Eu que não prestei atenção aqui...

Oi, Nicholas, sem problema nenhum!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software