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

erro querySelector

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Variáveis e Operadores e atividade Calculando e exibindo o IMC corretamente

por Laura Fernandez
| 34.9k xp | 17 posts

Meu código não reconhece o querySelector(".info-Peso"), apresenta erro Uncaught TypeError: Cannot read property 'querySelector' of null at principal.js:6

HTML

<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>

Javascript

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

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

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 imc = peso / (altura * altura);
tdImc.textContent = imc;
7 respostas
por Laís Cavalcanti
| 2576.8k xp | 4815 posts
Instrutor

Oi, Laura, tudo bem?

Testei o seu código e ele retorna o valor do IMC do Paulo, dá 25, ou seja, ele consegue pegar o valor de .info-peso

Você poderia passar mais detalhes do código. se tem mais arquivos.

Aguardo :}

por Laura Fernandez
| 34.9k xp | 17 posts

Oi lais, tudo.

O código Javascript está completo, testei várias vezes e ainda fica com o mesmo erro principal.js:6 Uncaught TypeError: Cannot read property 'querySelector' of null at principal.js:6 (anonymous) @ principal.js:6

por Gabriel Leite
| 3484k xp | 5398 posts
Instrutor

Boa noite, Laura! Como vai?

O seu código JS está correto! Pelo log de erro, eu imagino que vc está colocando o script logo no início da tag body, antes de todo o restante do seu HTML! O que acontece, é que nesse caso, como as tags HTML são carregadas após o JS, ele ( o JS ) acaba se enrolando e não encontra os elementos que vc busca através do querySelector()!

Coloque o código JS no final do body, logo antes do fechamento dessa tag e tudo deve funcionar como esperado! Seu código deve ficar mais ou menos como o visto a seguir:

<html>
<body>
    <table>
        <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>
        </tbody>
    </table>

    <script>
        // código JavaScript
    </script>
</body>
</html>

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, minha aluna!

por Laura Fernandez
| 34.9k xp | 17 posts

Tentei fazer como você me disse mais ainda segue acontecendo, mesmo erro permanece, principal.js:6 Uncaught TypeError: paciente.querySelector is not a function at principal.js:6

<!DOCTYPE html>

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

<script>
    console.log("Oi mundo");
    console.log(document);
</script>



</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>
por Laís Cavalcanti
| 2576.8k xp | 4815 posts
Instrutor

Oi, Laura, como vai?

Rodei o seguinte código:

<!DOCTYPE html>

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

<script>
    console.log("Oi mundo");
    console.log(document);
</script>



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

e

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

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

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 imc = peso / (altura * altura);
tdImc.textContent = imc;

E obtive a seguinte saída: 

Aparecida Nutricionista
Meus pacientes
Nome     Peso(kg)     Altura(m)     Gordura Corporal(%)     IMC
Paulo     100     2.00     10     25
João     80     1.72     40     0
Erica     54     1.64     14     0
Douglas     85     1.73     24     0
Tatiana     46     1.55     19     0

O cálculo do IMC de Paulo sai com um valor de 25 (como está sem CSS, fica mal formatado).

Você poderia por teu código completo no GitHub pra podermos investigar melhor o que está acontecendo?

por Laura Fernandez
| 34.9k xp | 17 posts

Oi Lais, tudo bem.

Aqui está completo 

<!DOCTYPE html>

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

<script>
    console.log("Oi mundo");
    console.log(document);
</script>



</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>
var titulo = document.querySelector(".titulo");
titulo.textContent = "Aparecida Nutricionista";

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

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 invalido!");
  pesoEhValido = false;
  tdImc.textContent = "Peso invalido!";
}
              //ou//
if (altura <= 0 || altura >= 3.00){
  console.log("Altura invalida!");
  alturaEhValida = false;
  tdImc.textContent = "Altura invalida!";
}
                // e //
if (alturaEhValida && pesoEhValido){
  var imc = peso / (altura * altura);
  tdImc.textContent = imc;
}
solução!
por Gabriel Leite
| 3484k xp | 5398 posts
Instrutor

Boa tarde, Laura! Como vai?

Veja que nessa linha var paciente = document.querySelectorAll(".paciente") vc está usando o document.querySelectorAll(). Esse método retorna um NodeList representando todos os elementos que contêm o seletor passado como parâmetro.

Além disso, veja que no seu código não há elementos com a classe paciente que vc está utilizando como seletor! A classe utilizada por vc é Paciente, com P maiúsculo. O problema que vc está tendo é especificamente causado por essa última questão que acabei de citar.

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, minha aluna!

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