null | JavaScript: programando na linguagem da web

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Raphael

| 211.6k xp | 120 posts

ele aparece null quando digito

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

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

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

e meu 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">
<link rel="" 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/site.js"></script>
</body>
</html>

2 respostas

por Lucas Ferreira de Lima

| 264.1k xp | 28 posts

09/08/2019

Olá Raphael, repare que você está pegando uma lista de objetos ao invés de filtrar sobre a seleção do id paciente

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

O código que pegaria o info-peso do id do primeiro paciente não pode ter o querySelector direto do document, mas sim direto da seleção anterior paciente

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

Espero ter ajudado :)

solução!

por André Victor Ruiz Pedroso

| 2101.7k xp | 3838 posts

Moderador Analista Pleno

09/08/2019

Oi Raphael tudo bem?

Rodei aqui no meu navegador e não dá esse erro null. Teria como subir a sua pasta para o github para analisarmos a estrutura de pasta do projeto.

Veja como ficou o meu código que não deu erro. Se quiser testar com ele.

<!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">
    <link rel="" 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 srcFalso="js/site.js">
        document.querySelector("#primeiro-paciente");

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

        var paciente = document.querySelector("#primeiro-paciente");
        var tdPeso = document.querySelector(".info-peso");
        console.log(paciente);
        console.log(tdPeso);
    </script>
</body>

</html>

PRORROGAMOS O DESCONTO!