1
resposta

TypeError: Cannot read properties of null (reading 'textContent')

Minha barra de pesquisa não quer funcionar, já re visei o codigo mas não consigo achar o errro e quando abro o console aparece essa mensagem: TypeError: Cannot read properties of null (reading 'textContent') at HTMLInputElement.filtrarPesquisa (script.js:37:56)

const containerVideos = document.querySelector(".videos__container");

async function buscarEMostrarVideos() {
  try {
    const busca = await fetch("http://localhost:3000/videos");
    const videos = await busca.json();
    videos.forEach((video) => {
      if(video.categoria ==''){
        throw new Error('Video sem categoria')
      }
      containerVideos.innerHTML += `
          <li class="videos__item">
              <iframe src="${video.url}" title="${video.titulo}" frameborder="0" allowfullscreen></iframe>
              <div class="descricao-video">
                  <img class="img-canal" src="${video.imagem}">
                  <h3 class="titulo-videos">${video.titulo}</h3>
                  <p class="titulo-canal">${video.descricao}</p>
              </div>
          </li>
          `;
    });
  } catch (error) {
    containerVideos.innerHTML = `<p>Houve um erro ao carregar os videos: ${error}</p>`;
  }
}
buscarEMostrarVideos()


const 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"
  }
}
1 resposta

Oi, Selton. Tudo bom?

Dei uma olhada no código que você colocou e acredito que a diferença está na linha 16. Tem um h3 do conteúdo que vai ser inserido que contém um S no final de vídeo ficando titulo-videos <h3 class="titulo-videos">${video.titulo}</h3> Aí lá na linha 37 a classe está sem o S.

Testa remover esse S que está sobrando na linha 16 e