1
resposta

DUVIDA

onst barraDePesquisa = document.querySelector(".pesquisar__input");

barraDePesquisa.addEventListener("input", filtrarPesquisa)

function filtrarPesquisa(){ const videos = document.querySelectorAll(".videos__item");

if (barraDePesquisa.value != ""){
    for(let video of videos){
        let titulo = video.querySelector("titulo-video").textContent.toLowerCase()
        let valorFiltro = barraDePesquisa.value.toLowerCase()

        if (!titulo.includes(valorFiltro)){
            video.style.display = "none"
        }else{
            video.style.display = "block"
        }
    }
}else{
    video.style.display = "block"


}

} nao esta filtrando

1 resposta

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:

  1. 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").

  2. 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.

  3. 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.