Entrar Ainda não tem acesso?
1
resposta

Digito o nome e o filtro não funciona

Referente ao curso JavaScript: programando na linguagem da web, no capítulo Filtrando uma tabela e atividade Implementando a lógica de filtragem

por Jainara Nátaly Câmara
| 108.5k xp | 15 posts

Meu código está idêntico ao da aula e não consigo entender por que o filtro não deu certo.

Segue o código: 

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 tdNome = paciente.querySelector(".info-nome");
            var nome = paciente.textContent;

            if (nome != 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");
        }
    }
});
1 resposta
por Lucas De Castro Patrão Rezende Silva
| 56.9k xp | 20 posts
Analista de Sistemas Jr.

Olá Jainara, tudo bem?

Repare em algo:

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

Logo aqui na sua variável nome, ao ínves de colocar tdNome.TextContext, você digitou paciente.TextContent. Desta forma, ao meu ver, o Javascript tenta puxar o conteúdo de texto de paciente, que seria a nossa TR (a linha com todos dados do paciente) O correto é puxar apenas o nome! Então você precisa usar a sua Var TdNome para isso, sabendo que ela que puxou o nome dos pacientes (as TDs que as contém) do seu código HTML.

O correto fica desta forma:

for (var i = 0; i < pacientes.length; i++){
            var paciente = pacientes[i];
            var tdNome = paciente.querySelector(".info-nome");
            var nome = tdNome.textContent;

Espero ter ajudado! Também sou iniciante.