Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Bug] Problema com

Referente ao curso JavaScript: criando requisições, no capítulo Buscando elementos e atividade Busca dinâmica

por José Daniel Aragão Barreto
| 106.1k xp | 15 posts

Código no meu github: https://github.com/DanielBarret0/JavaScript-criando-requisisoes/tree/unidade-4

Arquivo buscarVideo.js linha 4

import {conectaApi} from "./conectaApi.js";

async function buscarVideo() {
    /*Aqui está o problema*/
    /* evento.preventDefault(); */

    const dadosDePesquisa = document.querySelector("[data-pesquisa]").value;
    const busca = await conectaApi.buscaVideo(dadosDePesquisa);

    console.log(busca);
    
}

const botaoDePesquisa = document.querySelector("[data-botao-pesquisa]");

botaoDePesquisa.addEventListener("click", evento => buscarVideo(evento));

Quando eu uso o preventDefault aparece um erro no meu console do navegador: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Nagevador é o Edge

Mas quando eu removo o trecho de código evento.preventDefault(); Funciona nomalmente a pesquisa segue o print: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Minha dúvida é tem algum problema não usar o preventDefault? Ou como resolver esse problema? Desde já Obrigado!

2 respostas
solução!
por Mike de Sousa
| 2583k xp | 5169 posts
Alura Scuba Team Suporte Educacional

Boa tarde, José. O problema é que quando você declara a função, você não define nenhum parametro nela.

async function buscarVideo() {
    /*Aqui está o problema*/
    /* evento.preventDefault(); */

    const dadosDePesquisa = document.querySelector("[data-pesquisa]").value;
    const busca = await conectaApi.buscaVideo(dadosDePesquisa);

    console.log(busca);
    
}

Mas quando chama a função no listener, você passa evento como parametro da função.

botaoDePesquisa.addEventListener("click", evento => buscarVideo(evento));

Ajustando a função para receber um parametro deve resolver o problema. Seu código deve ficar assim...

async function buscarVideo(evento) {

    evento.preventDefault();

    const dadosDePesquisa = document.querySelector("[data-pesquisa]").value;
    const busca = await conectaApi.buscaVideo(dadosDePesquisa);

    console.log(busca);
    
}

Se ainda houver algum problema me avisa que eu tento ajudar como eu puder. Bons estudos.

por José Daniel Aragão Barreto
| 106.1k xp | 15 posts

Obrigado! Fazer o que você me indicou resolveu o problema!