Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Resultado mudou quando coloquei a função anonima do "EventListener" dentro de outra função antes de chamar a mesma.

O seguinte código tem o objetivo de filtrar conteúdo de uma pagina com base no input de uma caixa de texto, até o momento funciona perfeitamente.

headerMenu.inputPesquisa.addEventListener("input", function(){
    let posts = document.querySelectorAll(".post");
    for(let i = 0; i < posts.length; i++){
        let post = posts[i];
        let headLine = post.querySelector("p");     //  elemento aqui depende da organização do conteudo
        let hLine = headLine.textContent;           //  dos posts no feed.
        let reg = new RegExp(this.value, "i");

        if(!reg.test(hLine)){
            rmClass(post, "filtro-test");

        }   else{
            adClass(post, "filtro-test");
        }
    }
});

Porém, ao colocar o conteúdo da função anonima presente no "EventListener()" dentro de outra função e chamar o mesmo dessa forma (como mostrado a baixo), ele seleciona aplica o seleciona tudo dentro do intervalo que busca assim que qualquer conteúdo é colocado no "input" independente de qual seja e não volta atrás como deveria (tirando a class).

function filtra(){
    let posts = document.querySelectorAll(".post");
    for(let i = 0; i < posts.length; i++){
        let post = posts[i];
        let headLine = post.querySelector("p");     //  elemento aqui depende da organização do conteudo
        let hLine = headLine.textContent;           //  dos posts no feed.
        let reg = new RegExp(this.value, "i");

        if(!reg.test(hLine)){
            rmClass(post, "filtro-test");

        }   else{
            adClass(post, "filtro-test");
        }
    }
}


headerMenu.inputPesquisa.addEventListener("input", function(){
    filtra();
});

As funções usadas em ambos os casos vem de outro arquivo e fazem o que o nome disse, dessa forma:

function adClass(elemento, classe) {
    elemento.classList.add(classe);
    return 0;
}
function rmClass(elemento, classe) {
    elemento.classList.remove(classe);
    return 0;
}
1 resposta
solução!

Fala Freire,

Veja só, na chamada do evento listener vc passa uma função como parâmetro e essa é automaticamente invocada ao receber num evento.

Logo seu código seria

headerMenu.inputPesquisa.addEventListener("input",  filtra);

Daí você passou uma função, e não invocou, a invocação será feita no evento

Da um Google sobre High Order Funciona em JavaScript q vc vai entender melhor.

Nesse caso

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