O seu código tem alguns pontos que precisam ser corrigidos para que o filtro funcione corretamente. Vou destacar os erros e, em seguida, apresentar a versão corrigida:
Erros encontrados:
Seletor incorreto:No trecho video.querySelector("titulo-video")
, parece que você queria selecionar um elemento com a classe ou a tag do título do vídeo. Se for uma classe, o correto seria video.querySelector(".titulo-video")
.
Variável fora do escopo:No else
(fora do for
), você está usando video.style.display = "block"
, mas video
não está definido fora do laço for
. Isso deve ser corrigido para que todos os vídeos voltem a ser exibidos quando o campo de pesquisa estiver vazio.
Organização do código:O código pode ser otimizado para melhor legibilidade e desempenho.
Código corrigido:
const barraDePesquisa = document.querySelector(".pesquisar__input");
barraDePesquisa.addEventListener("input", filtrarPesquisa);
function filtrarPesquisa() {
const videos = document.querySelectorAll(".videos__item");
const valorFiltro = barraDePesquisa.value.toLowerCase();
for (let video of videos) {
// Certifique-se de que o título do vídeo tem a classe "titulo-video"
const titulo = video.querySelector(".titulo-video").textContent.toLowerCase();
if (valorFiltro !== "") {
if (titulo.includes(valorFiltro)) {
video.style.display = "block";
} else {
video.style.display = "none";
}
} else {
// Se o campo estiver vazio, exibe todos os vídeos
video.style.display = "block";
}
}
}
O que verificar no seu HTML:
Certifique-se de que o elemento do título do vídeo tem a classe titulo-video
, por exemplo:
<div class="videos__item">
<h3 class="titulo-video">Aprendendo JavaScript</h3>
</div>
Resumo das correções:
- Alterei
querySelector("titulo-video")
para querySelector(".titulo-video")
. - Corrigi o problema de escopo da variável
video
. - Organizei a lógica para garantir que todos os vídeos apareçam quando o campo estiver vazio.