1
resposta

Problemas com o filtro: Uncaught TypeError: Cannot read properties of null (reading 'textContent')

Código filtra.js

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

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

    if (this.value.length > 0){
        for (var i = 0; i < pacientes.length; i++){
            var paciente = pacientes[i];
            var tdNomes = paciente.querySelector(".info-nome");
            var nome = tdNomes.textContent;
            var expressao = new RegExp(this.value, "i");

            if (!expressao.test(nome)){
                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");
        }
    }

});
1 resposta

Olá, Nathália.

Isso aconteceu porque quando você executou o comando:

var tdNomes = paciente.querySelector(".info-nome");

Não foi encontrado um elemento dentro do paciente com a classe css .info-nome.

Daí, tdNomes é null. Daí, quando você tenta executar:

        var nome = tdNomes.textContent;

Explode esse erro. O problema pode estar nessa função:

function montaTr(paciente) {
    var pacienteTr = document.createElement("tr");
    pacienteTr.classList.add("paciente");

    pacienteTr.appendChild(montaTd(paciente.nome, "info-nome")); // precisa passar aqui o nome certinho da classe
    pacienteTr.appendChild(montaTd(paciente.peso, "info-peso"));
    pacienteTr.appendChild(montaTd(paciente.altura, "info-altura"));
    pacienteTr.appendChild(montaTd(paciente.gordura, "info-gordura"));
    pacienteTr.appendChild(montaTd(paciente.imc, "info-imc"));

    return pacienteTr;
}

Ou no html principal:

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

Foco nessa td:

<td class="info-nome">