Entrar Ainda não tem acesso?
1
resposta

[Bug] Video indisponível

Referente ao curso JavaScript: criando requisições, no capítulo Criando novos elementos e atividade Lista de exercícios

por Eliane Ferreira
| 8.4k xp | 2 posts
import { conectaApi, listaVideos } from "./conectaApi.js";
const lista = document.querySelector("[data-lista]");

function constroiCard(titulo, descricao, url, imagem) {
  const video = document.createElement("li");
  video.className = "videos__item";
  video.innerHTML = `iframe width="100%" height="72%" src="${url}"
  title="${titulo}" frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen></iframe>
<div class="descricao-video">
  <img src="${imagem}" alt="logo canal alura">
  <h3>${titulo}</h3>
  <p>${descricao}</p>
</div> 
`

return video;
}

async function listaVideos () {
    const listaApi = await conectaApi.listaVideos();
    listaApi.forEach(elemento => lista.appendChild(
        constroiCard(elemento.titulo, elemento.descricao, elemento.url, elemento.imagem)))
        
    }

listaVideos();

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
por Renan Lima
| 3691.8k xp | 7811 posts
Alura Scuba Team Apoio Educacional - Alura

Olá Eliane!

Pelo erro apresentado na imagem, parece que o JavaScript está tentando adicionar um ouvinte de eventos (com addEventListener) a um elemento que não foi encontrado no DOM, resultando em null. Isso geralmente acontece quando tentamos acessar um elemento antes dele estar disponível na página ou se o seletor usado para encontrar o elemento está incorreto.

Como o erro menciona o arquivo criarVideos.js na linha 17, verifique se o elemento que você está tentando acessar realmente existe no HTML e se os seletores estão corretos. Por exemplo, se você está tentando adicionar um ouvinte a um botão de envio do formulário, certifique-se de que o botão tem o atributo data-attribute correspondente e que você está usando o seletor correto em seu JavaScript para selecioná-lo.

Qualquer coisa compartilha os seus códigos completos aqui com a gente, pode colá-los aqui mesmo. O JavaScript e o HTML, assim conseguimos testar.

Espero ter ajudado. Qualquer dúvida manda aqui. Bons estudos.