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

filtro.js:10 Uncaught TypeError: Cannot read property 'textContent' of null at HTMLInputElement.<anonymous>

//filtro.js

var campoFiltro = document.querySelector("#filtro-tabela");

campoFiltro.addEventListener("input", function(){
    var pacientes = document.querySelectorAll(".paciente");

    if(this.value.length > 0){
        for(var i = 0; i < pacientes.length; i++){
            var paciente = pacientes[i];
            var tdNome = paciente.querySelector(".info-nome");
            var nomePaciente = tdNome.textContent;
            console.log(nomePaciente);

            if(nomePaciente != this.value){
                paciente.classList.add("invisivel");
            }else{
                paciente.classList.remove("invisivel");
            }
        }
    }else{
        for(var i = 0; i < pacientes.length; i++){
            var paciente = pacientes[i];
            paciente.classList.remove("invisivel");
        }
    }
});

Não está fazendo o filtro e após inserir um novo paciente e tentar filtrar pelo seu nome, ocorre o seguinte erro:

filtro.js:10 Uncaught TypeError: Cannot read property 'textContent' of null at HTMLInputElement.

4 respostas

Boa noite, Bruno! Como vai?

Vc está tendo esse erro pq, como o log já diz, vc está tentando acessar a propriedade textContent de um objeto que está nulo e isso está acontecendo na linha 10 do seu código.

A linha 10 é essa aqui:

var nomePaciente = tdNome.textContent;

Provavelmente há algum erro no seu arquivo HTML, portanto, cole aqui o conteúdo do arquivo HTML que vc está manipulando nesse código Javascript para que eu possa analisar melhor e te ajudar!

Grande abraço!

Olá Gabriel! Na verdade, a linha 10 é essa: "var nomePaciente = tdNome.textContent;"; O erro está relacionado ao conteúdo de tdNome.textContent, mas ainda não consegui encontrar. Segue abaixo o meu HTML, conforme solicitado:

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

                <label for="buscar-tabela">Buscar</label>
                <input type="text" name="filtro" id="filtro-tabela" placeholder="Digite o nome do paciente">

                <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">2.00</td>
                            <td class="info-gordura">40</td>
                            <td class="info-imc">0</td>
                        </tr>

                        <tr class="paciente" id="terceiro-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" id="quarto-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" id="quinto-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>

        <section class="container">
            <h2 id="titulo-form">Adicionar novo paciente</h2>
            <ul id="mensagens-erro"></ul>
            <form id="formulario">
                <div class="grupo">
                    <label for="nome">Nome:</label>
                    <input id="nome" class="campo" name="nome" type="text" placeholder="Digite o nome do paciente"></inout>
                </div>
                <div class="grupo">
                    <label for="peso">Peso:</label>
                    <input id="peso" class="campo campo-medio" name="peso" type="text" placeholder="Digite o peso do paciente"></inout>
                </div>
                <div class="grupo">
            <label for="altura">Altura:</label>
            <input id="altura" class="campo campo-medio" name="altura" type="text" placeholder="Digite a altura do seu paciente">
        </div>
        <div class="grupo">
            <label for="gordura">% de Gordura:</label>
            <input id="gordura" class="campo campo-medio" type="text" placeholder="Digite a porcentagem de gordura do seu paciente">
        </div>
                <button id="adicionar-paciente" class="botao bto-principal">Adicionar</button>
            </form>

        <script src="js/calcula-imc.js"></script>
        <script src="js/form.js"></script>
        <script src="js/remover-paciente.js"></script>
        <script src="js/filtro.js"></script>
    </body>
</html>
solução!

Foi mal, Bruno! Peguei um trecho do seu código pensando e explicando sobre outro! hahahaha Mas eu já corrigi!

Sobre o seu problema, eu peguei o seu código Javascript e HTML e tudo funcionou corretamente. Vc já experimentou atualizar o seu navegador pra ver se não é algum cache de conteúdo antigo?

Outra coisa, eu vi que existem outros arquivos Javascript no seu HTML. Neles vc faz alguma modificação no DOM? Pq para vc obter esse erro que vc está tendo a variável tdNome teria que ser nula, mas isso só seria verdade se vc não tivesse nenhum paciente na tabela.

Bom dia, Bruno! Como vai?

Vc conseguiu resolver o problema? Se sim, poderia compartilhar para que mais pessoas possam saber como resolver caso venham a ter o mesmo problema?