[Dúvida] Aula 2 - Operadores lógicos | JavaScript: programando a Orientação a Objetos

Boa tarde! Não estou conseguindo chegar no resultado em que o professor chegou... A tabela do IMC deveria estar constando como "Peso inválido" ou "Altura inválida" porém não estou conseguindo chegar a nenhum desses resultados.

Segue meu código abaixo:

<!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>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">0</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>
        
        <script src="/js/principal.js"></script>
    </body>
    
</html>

JS:

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

var paciente = document.querySelectorAll(".paciente");
console.log(pacientes.length);

for(var i = 0; i < 5; 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!";
}

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

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

Olá, Brenda!

Parece que você tem um erro no seu código JavaScript. Vou ajudar a identificar e corrigir os problemas. Aqui estão algumas correções que você precisa fazer:

A variável paciente está definida como uma lista de elementos com a classe "paciente", mas você está tentando acessar propriedades diretamente a partir dela. Você deve iterar sobre os elementos dentro da lista. Além disso, a variável pacientes não está definida no seu código, mas você tenta usá-la em console.log(pacientes.length). Você deve usar paciente em vez de pacientes. Vamos corrigir isso:

var pacientes = document.querySelectorAll(".paciente");
console.log(pacientes.length);

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;

    // Resto do seu código...
}

No seu código, você verifica se o peso e a altura são válidos para cada paciente, mas os valores de peso e altura são obtidos como texto (strings) diretamente do HTML. Antes de realizar os cálculos, você precisa converter esses valores para números (números de ponto flutuante). Para fazer isso, você pode usar a função parseFloat(). Veja como fazer isso:

var peso = parseFloat(tdPeso.textContent);
var altura = parseFloat(tdAltura.textContent);

Você está usando paciente como se fosse uma única linha da tabela, mas na verdade, ele representa uma coleção de pacientes. Você deve mover a lógica de cálculo do IMC para dentro do loop for, para que você calcule o IMC de cada paciente individualmente:

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

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

    var tdAltura = paciente.querySelector(".info-altura");
    var altura = parseFloat(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";
    }

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

    if (alturaEhValida && pesoEhValido) {
        var imc = peso / (altura * altura);
        tdImc.textContent = imc.toFixed(2); // Arredondar o IMC para 2 casas decimais
    }
}

Seu código completo Brenda:

var pacientes = document.querySelectorAll(".paciente");
console.log(pacientes.length);

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

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

    var tdAltura = paciente.querySelector(".info-altura");
    var altura = parseFloat(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";
    }

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

    if (alturaEhValida && pesoEhValido) {
        var imc = peso / (altura * altura);
        tdImc.textContent = imc.toFixed(2); // Caso queria arrendondar utilizar o toFixed
    }
}

Com essas correções, seu código deve funcionar corretamente e calcular o IMC para cada paciente, exibindo "Peso inválido" ou "Altura inválida" quando necessário.

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!