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

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
10
respostas

Erro no querySelector

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

por Vitor Germano
| 34.6k xp | 4 posts

Tentei fazer desta maneira, mas apareceu um erro no navegador dizendo que a variável está nula, apaguei a linha 9 e 11(paciente.querySelector e console.log) e não ocorreu mais o erro, indicando que o erro está em uma destas linhas. Estou buscando a variável de maneira errada?

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

// Cálculo de IMC's

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

console.log(tdPeso);
10 respostas
por Vitor Germano
| 34.6k xp | 4 posts

O erro que ocorre no navegador é este

principal.js:9 Uncaught TypeError: Cannot read property 'querySelector' of null
por Estudante
| 719.4k xp | 745 posts

E aí, Vitor! Certinho? =)

Aparentemente, esse código está correto... Você poderia postar seu HTML, aqui, também? =)

Para que esse JS esteja correto, você precisa ter na sua tabela, a <tr> com ID primeiro-paciente... Parece que está ok, mas, além disso, você precisa de uma <td> com a classe info-peso... Talvez o erro esteja aí... =)

Fábio

por Estudante
| 719.4k xp | 745 posts

Atualizando! Rs...

Com o seu comentário, acho que ele não está encontrando a <tr>, mesmo...

por Vitor Germano
| 34.6k xp | 4 posts

Ficou grandão mas tá ai hahaha

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title class="aba">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>
solução!
por Estudante
| 719.4k xp | 745 posts

Sem problemas! Rs.

O erro está justamente na <tr> que eu comentei...

Repare:

<tr class="paciente" id-"primeiro-paciente">

Você, sem querer, colocou um -, mas deveria ter um =, assim:

<tr class="paciente" id="primeiro-paciente">

Espero ter ajudado! =)

Abraço e bons estudos,

Fábio

por Vitor Germano
| 34.6k xp | 4 posts

Meu Deus, que falta de atenção foi! Hahahaha

Obrigado!

por Francisco Nunes
| 175.1k xp | 30 posts

nesse trecho falta a parte em que voce extrai o valor de texto da classe info-peso

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

por Mairo
| 69.7k xp | 10 posts

Não seria o caso de não estar encontrando o id-"primeiro-paciente"? Repare que está com um traço ao invés de igual

por Francisco Nunes
| 175.1k xp | 30 posts

verdade kkkkk , valeu , tambem não observei

por Fabricio Pereira de OLiveira Cunha
| 115.4k xp | 5 posts

Resolvido, foi um pequeno erro rsrs.

Grato!

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA