Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
9
respostas

Erro no Query selector

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Variáveis e Operadores e atividade Buscando dados do paciente

por Rafael de
| 4.8k xp | 4 posts

Estou fazendo a aula 2 de JS, e quando vou exibir no console, aparece esse erro aqui "Uncaught TypeError: Cannot read property 'querySelector' of null at principal.js:6"

mas comparando com a aula meu código aparenta estar certo, então.... Onde errei ?

Meu código JS

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

var paciente = document.querySelector("#primeiro-paciente");

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

Meu código 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">
                <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="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>
                </table>

            </section>
        </main>
        <script src="js/principal.js"></script>
    </body>
</html>
9 respostas
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Rafael, tudo bom?

#primeiro-paciente este elemento não existe ainda na sua estrutura html, ele é criado em algum momento específico dinamicamente?

Sem ele o querySelector não consegue encontrar elementos filhos

Espero ter ajudado :)

por Rafael de
| 4.8k xp | 4 posts

O fato de eu ter colocado o ID na classe paciente do HTML já não serviria? 

<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>
`
por Cristofer Vinicius Bönmann
| 69.9k xp | 11 posts

Olá, Rafael. Eu testei o seu código aqui e funcionou perfeitamente. Como você está tentando exibir no console? 

console.log(paciente);
console.log(tdPeso);

Assim?

por Bruno Barauskas
| 125.1k xp | 31 posts
Owner

Como o código está correto pode ser apenas cache do browser. Nada indica erro neste código.

por Rafael de
| 4.8k xp | 4 posts

Cristofer, quando eu tento exibir assim:

console.log(paciente);
console.log(tdPeso);

Aparece no console o seguinte: "null" e "undefined" Mas antes mesmo de eu colocar os comandos, já aparece a mensagem 

Uncaught TypeError: Cannot read property 'querySelector' of null
    at principal.js:6
(anonymous) @ principal.js:6

Bruno, então uma solução seria limpar o cache? pq tentei tbm e não deu certo =/

por Bruno Barauskas
| 125.1k xp | 31 posts
Owner

Estranho Rafael, porque todo o código está correto. Procurei por um erro de sintaxe ou algo do tipo e não localizei. Pode ser um detalhe bobo que todo mundo passa os olhos e não vê, mas se analisarmos o erro que está sendo lançado no console vemos que quando você chama "paciente.querySelector" ele diz que paciente está nulo.

Faça um debug no seu navegador e coloque um breakpoint na linha anterior, que pega o paciente e veja se esta variável está sendo preenchida antes de tentar utilizar ela.

por Bruno Barauskas
| 125.1k xp | 31 posts
Owner

Só mais uma questão boba.... você deu refresh no seu browser? Pode ter alterado algo no HTML e esqueceu de dar refresh no browser... o código que você postou realmente está correto.... faz o debug que eu te falei e fala qual foi o resultado, o segredo está na variável paciente, o erro que está vindo depois tem relação com o conteúdo dessa variável, ela deve estar preenchida.

por Cristofer Vinicius Bönmann
| 69.9k xp | 11 posts

Eu faria o que o Bruno disse. Talvez tentar em outro browser ajude também.

solução!
por Rafael de
| 4.8k xp | 4 posts

Oi galera, então... fiquei uns dias sem mexer e resolvi mudar o 

id="primeiro-paciente"

do 'paulo' para o 'joão' e ai funcionou, resolvi voltar o id para o 'paulo' e funcionou direitinho... vai saber né?