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