Entrar Ainda não tem acesso?
3
respostas

TypeError: paciente.querySelector is not a function

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Arrays, Loop e Estilos e atividade Replicando a validação e o cálculo do IMC para todos os pacientes

por Bruno Cesar Rodrigues
| 8.5k xp | 2 posts

Quando coloco o método "paciente.querySelectorAll" a linha 7, que é a linha do peso para de funcionar

classe principal.js


  var nomeTitulo = document.querySelector(".titulo");
  nomeTitulo.textContent = "Bruno QA - deu certo"

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

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

  var tdAltura = paciente.querySelector(".info-altura");

  var alterImc = paciente.querySelector(".info-imc");

  var peso = tdPeso.textContent;
  var altura = tdAltura.textContent;

  pesoEhvalido = true;
  alturaEhValida = true;

  if(peso > 400 || peso < 0) {
    tdPeso.textContent = "Peso inválido"
    pesoEhvalido = false;
  }

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

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


  console.log(paciente);
  console.log(tdPeso);
  console.log(tdAltura);
  console.log("O imc de Paulo é: " + imc);
  console.log(alterImc);

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

Conseguem me ajudar?

3 respostas
por Thayana Regina de Souza Grance
| 176.4k xp | 14 posts

Oi Bruno, observe que você não declarou que é sua var paciente.

Na aula, o código é esse:

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

O loop for define que de cada paciente selecionado pelo "querySelectorAll" vai ser selecionada as infos peso e altura, entende?

Resumindo, acredito que faltou você colocar essa parte do código no seu arquivo.

Espero ter ajudado, bons códigos!

por Bruno Cesar Rodrigues
| 8.5k xp | 2 posts

Acho que não entendi.

o código está completo e igual ao do professor, olha só


  var nomeTitulo = document.querySelector(".titulo");
  nomeTitulo.textContent = "Bruno QA - deu certo";

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

  for (var i = 0; i < pacientes.length; i++) {
    console.log(pacientes[i]); //SERVE PARA ACESSAR CADA PACIENTE DA LISTA

    var paciente = pacientes[i];

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

  var tdAltura = pacientes.querySelector(".info-altura");

  var alterImc = pacientes.querySelector(".info-imc");

  var peso = tdPeso.textContent;
  var altura = tdAltura.textContent;

  pesoEhvalido = true;
  alturaEhValida = true;

  if(peso > 400 || peso < 0) {
    tdPeso.textContent = "Peso inválido"
    pesoEhvalido = false;
  }

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

if (pesoEhvalido && alturaEhValida) {
  var imc = peso / (altura * altura);
  alterImc.textContent = imc;
}
}
por Thayana Regina de Souza Grance
| 176.4k xp | 14 posts

o que vc mandou antes não estava com o loop. Não estou vendo pelo menos.

Qualquer coisa copia a versão completa desse ponto do curso e vê se dá certo e, depois compara com o seu linha por linha.

me conta se conseguiu =)