5
respostas

Problema com RegExp (Curso Javascript Programando na Linguagem da Web)

Olá, boa tarde

Pessoal estou com um probleminha com o exercício desse módulo de filtrar tabela, aparentemente a lógica aplicada está funcional, mas não estou conseguindo filtrar os dados. Tentei fazer um código um pouco diferente do que sempre o professor passa, eu acho q o aprendizado fica melhor, mas estou empacado nessa parte, dentro do forEach coloquei um console.log pra ver se a variável que pega o valor do input estaria passando os dados e está tudo ok, porém na hr de executar o RegExp em si o código não faz nada e não apresenta nenhum erro, no código tem umas linhas de comentários explicado como funciona.

Agradeceria se alguem ajudasse a dar uma luz, a parte do código está a seguir.

//BUSCA PACIENTE
(function Buscar() {
    let busca = document.querySelector('#filtrar-tabela');
    busca.addEventListener('input', function() {
        let listaPessoa = document.querySelectorAll('.paciente');

        /*
        A VARIAVEL ABAIXO valorDoInput REFENCIA AO this QUE RECEBE OS DADOS
        DO listaPessoa, TENTEI USAR O this.value DENTRO DO forEach ASSIM COMO
        NA VIDEO AULA, POREM O this.value DENTRO DO forEach PERDE A REFENCIA
        DO this.value DA VARIAVEL busca.  
        */  
        let valorDoInput = this.value;


        if(this.value.length > 0){ 
            listaPessoa.forEach(function(item) {

                let tdNome = item.querySelector('.info-nome');
                let nome = tdNome.textContent;

                /*CHAMADA DA VARIAVEL valorDoInput PASSANDO OS DADOS DE this.value
                DA VARIAVEL BUSCA*/
                let expressao = new RegExp(valorDoInput, "i");

                //TESTE PARA SABER SE valorDoInput ESTA PASSANDO OS DADOS
                console.log(valorDoInput);

                if (expressao.test(nome)){
                    item.classList.remove('invisivel');
                }
                item.classList.add('invisivel');
            }); 
        } else {
            listaPessoa.forEach(function(item) {
                item.classList.remove('invisivel');
                console.log();
            }); 
        }
    });
})();
5 respostas

To achando que esse codigo aqui que ta com problema:

if (expressao.test(nome)){
      item.classList.remove('invisivel');
}
item.classList.add('invisivel');

Pq se o if for verdade ele remove a classe. Mas depois do if ele adiciona a classe sempre de novo, independente do if. Ou seja, na pratica o efeito do if é sempre ignorado.

Sérgio, boa tarde.. Então o problema não é esse, pois essa lógica eu usei a do professor, isso é simplesmente uma classe CSS com display: none como está a seguir :/

.invisivel {
    display: none;
}

Olá, o Sérgio está correto, o problema está no if.

Altere para:

if (expressao.test(nome)) {
    item.classList.remove('invisivel');
} else {
    item.classList.add('invisivel');
}

Testei seu código desta maneira e funcionou aqui.

Olá Pedro, bom dia, amigão o meu código já está dessa forma, e aqui n funciona :/

resolvido pessoal, muito obrigado, o problema em si não era na lógica, era numa falta de atenção mesmo. a segunda condição não coloquei dentro de um else --`

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software