3
respostas

Erro console.log(paciente)

Estou com problema ao exibir o tr do console.log(paciente); sempre me retorna null juro que passei muito tempo analisando o código e não consegui resolver.

<header>
    <div class="container">
        <h1>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" id="segundo-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>
var titulo = document.querySelector(".titulo");
titulo.textContent = "Aparecida Nutricionista";

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

console.log(paciente);


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

console.log(tdPeso);
3 respostas

Boa tarde Filipe,

No console do navegador podemos ver este erro:

Uncaught TypeError: Cannot set property 'textContent' of null

Isso significa que o erro ocorreu nesta linha:

titulo.textContent = "Aparecida Nutricionista";

A variável titulo está como null pois o resultado do seu var titulo = document.querySelector(".titulo"); foi nulo, já que no seu HTML não tem nenhuma classe titulo.

Adicione a classe titulo no lugar certo do seu html e você vai conseguir passar desse erro.

Abraços

Desculpa mas o codigo nao saiu completo, mas o .titulo foi do title, mesmo removendo o problema continua.

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <title class="titulo" >Filipe 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>

Então filipe,

o document só pela elementos dentro da tag <body>.

Para pegar o titulo da página você precisa usar o document.title.

Acho que o ideal é você reassistir a aula. Não faz muito sentido colocar uma classe no title dentro da tag head.

Acredito que o correto seja:

var titulo = document.querySelector("h1");

 titulo.textContent = "Aparecida Nutricionista";