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

Cannot read property 'querySelector' of undefined

//titulo

var titulo = document.querySelector('.titulo');

    titulo.textContent = "Bruno Nutricionista";

//paciente 

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 pesoInvalido = true
    var alturaInvalida = true


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

    if(peso <= 0 || peso >= 1000){
        pesoInvalido = false;
        tdImc.textContent = "Peso inválido!";
    }

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

    }

Ele não calcula o IMC e no console aparece o erro "principal.js:17 Uncaught TypeError: Cannot read property 'querySelector' of undefined at principal.js:17"

Revisei o código e não consegui encontrar, quando eu isolo a operação sem o laço for e sem o "querySelectorAll" ele calcula o IMC do primeiro corretamente, porém quando faço o laço e adiciono o "querySelectorAll" ele apresenta esse erro, como se não conseguisse buscar os dados no ".paciente".

8 respostas

Oi, Hudson, tudo bem?

Você pode por o arquivo HTML para testar o seu projeto completo? :}

<!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="pacientes" >
                            <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>
                </table>

            </section>
        </main>

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

    </body>
</html>

Fico no aguardo !

Oi, Hudson, tudo bem?

Houve uma troca na última verificação:


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

Ao invés de você verificar pelo pesoEhValido e alturaEhValida você usou pesoInvalido e alturaInvalida

Espero ter te ajudado!

As palavras estão diferentes do exemplo do professor, porém eu defini as variáveis com nomes diferentes também, e os nomes das variáveis e da verificação estão iguais.então era para funcionar, ou não ?

E quando eu isolo o laço for, ele funciona, quando aplico o laço for ele dá erro.

Quando você testou meu código, você trocou apenas os nomes e deu certo ?

solução!

Tem um erro de digitação na linha do "for" que não permite a execução correta do script:

esta assim :

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

tem que ficar assim :

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

é só tirar o ";" antes de "{"

Show de bola !

Fiz a alteração e deu certo, muito obrigado pelo suporte galera !!!