2
respostas

[Dúvida] a página sempre recarrega

Olá, estyou fazendo um projeto parecido com o Alura books e estou usando as requisições que estão sendo ensinadas nessa aula. Sempre que clico no menu de contexto de cada livro e adiciono o livro, a página sempre recarrega. Poderiam me ajudar, por favor?

Segue o código:

const input = document.querySelector('.pesquisa-input');
const button = document.querySelector('.pesquisa-botao');
const menuList = document.querySelector('.livro-menu');

button.addEventListener('click', (event) => {
    event.preventDefault();

    //requisição para a API do google
    const text = input.value;
    const url = `https://www.googleapis.com/books/v1/volumes?q=${text}`;
    fetch(url)
        .then(response => response.json())
        .then(data => {
            const livros = data.items;

            //limpa a div de livros
            const livrosContainer = document.querySelector('.livros-container');
            livrosContainer.innerHTML = '';

            //cria os elementos de cada livro
            livros.forEach(livro => {
                const livroContainer = document.createElement('div');
                livroContainer.classList.add('livro-container');
                const tituloContainer = document.createElement('div');
                tituloContainer.classList.add('livro-titulo-container');
                const titulo = document.createElement('h2');
                titulo.classList.add('livro-titulo');
                titulo.textContent = livro.volumeInfo.title;

            //cria o menu de cada livro
                const divCheckbox = document.createElement('div');
                divCheckbox.classList.add('container__checkbox');
                const checkBox = document.createElement('input');
                checkBox.type = 'checkbox';
                checkBox.id = 'menu';
                checkBox.classList.add('container__botao');
                const label = document.createElement('label');
                label.setAttribute('for', 'menu');
                label.classList.add('container__rotulo');
                const span = document.createElement('span');
                span.classList.add('cabeçalho__menu-hamburguer');
                label.appendChild(span);
                divCheckbox.appendChild(checkBox);
                divCheckbox.appendChild(label);

                //evento para abrir o menu
                span.addEventListener('click', (event) => {
                    event.preventDefault();
                    checkBox.classList.toggle('active');
                    listaMenu.style.display = checkBox.classList.contains('active') ? 'block' : 'none';
                });

                //cria a lista de opções do menu
                const listaMenu = document.createElement('ul');
                listaMenu.classList.add('lista-menu');
                const itemMenu1 = document.createElement('li');
                itemMenu1.classList.add('lista-menu-item');

                //evento para adicionar o livro
                const linkMenu1 = document.createElement('p');
                linkMenu1.classList.add('lista-menu-link');
                linkMenu1.href = '#';
                linkMenu1.textContent = 'Add';

                //função para adicionar o livro
                async function addLivro(evento) {
                    evento.preventDefault();
                    console.log(evento);
                    const conexao = await fetch('http://localhost:3000/livros', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            titulo: livro.volumeInfo.title,
                            descricao: livro.volumeInfo.description,
                            imagem: livro.volumeInfo.imageLinks.thumbnail,
                            link: livro.volumeInfo.previewLink
                        })
                    });
                    const conexaoConvertida = await conexao.json();
                    return conexaoConvertida;
                }

                linkMenu1.addEventListener('click', evento => addLivro(evento));

                //evento para remover o livro
                const itemMenu2 = document.createElement('li');
                itemMenu1.classList.add('lista-menu-item');

                const linkMenu2 = document.createElement('a');
                linkMenu2.classList.add('lista-menu-link');
                linkMenu2.href = '#';
                linkMenu2.textContent = 'Remove';

               Resto do cógigo, não possui mais addEventListerners...

Obrigado.

2 respostas

Se você está enfrentando problemas em que a página sempre recarrega quando você tenta adicionar um livro, provavelmente está relacionado ao fato de que o comportamento padrão de um link () é recarregar a página. Para evitar esse comportamento, você precisa usar event.preventDefault() para impedir o comportamento padrão do link quando você adiciona um evento de clique.

Vou fornecer um exemplo de como você pode corrigir o código para evitar a recarga da página ao adicionar um livro:

linkMenu1.addEventListener('click', evento => {
    evento.preventDefault(); // Evita a recarga da página
    addLivro(evento);
});

Adicione evento.preventDefault(); no início do manipulador de eventos do clique para evitar que o link de adicionar (linkMenu1) cause a recarga da página.

eu já coloquei preventDefault em todos os lugares e ainda assim a página recarrega :/ coloquei do jeito que está escrito alí em cima, coloquei no início do método e nada.