Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Form recarregando quando clico no botão de remover ou o de editar.

Referente ao curso JavaScript: construindo páginas dinâmicas, no capítulo Integrando ao JavaScript e atividade Lista de exercícios

por GABRIEL SILVA COSTA
| 13.2k xp | 1 posts

Estou com duvida nessa parte, pois usei da mesma forma o preventDefault() para não recarregar a pagina.

Codigo HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <form>
    
    <input class="input-item" type="text" placeholder="digite a tarefa que desejar">
        <button class="button-item">Salvar</button>
    </form>

<script src="script.js"></script>
</body>
</html>

Codigo JavaScript:

const botao = document.querySelector('.button-item');
const botaoRemover = document.querySelector('.remover-botao');
let contador = 0;
botao.addEventListener('click',salvar);
botaoRemover.addEventListener('click',removerItem);
function salvar(evento){
    evento.preventDefault()
    const tarefa = document.querySelector('.input-item');
    const container = document.querySelector('form');
    
    const divContainer = document.createElement('div');
    const buttonEditar = document.createElement('button');
    
    const buttonRemover = document.createElement('button');
    const paragrafo = document.createElement('p');
    const divButton = document.createElement('div');
    const createCheck = document.createElement('input');
    createCheck.type = 'checkbox';
    paragrafo.innerText = tarefa.value;
    buttonEditar.innerHTML = 'Editar Item';
    buttonRemover.innerHTML = 'Remover Item';
    createCheck.id = 'contador-' + contador++;
    divContainer.classList.add('div-tarefas');
    buttonRemover.classList.add('remover-botao');
    container.appendChild(divContainer);
    divContainer.appendChild(createCheck);
    divContainer.appendChild(paragrafo);
    
    divButton.appendChild(buttonEditar);
    divButton.appendChild(buttonRemover);
    divContainer.appendChild(divButton);

}

function removerItem(evento){
    evento.preventDefault()
}
1 resposta
por Mike De Sousa Pereira
| 453.7k xp | 542 posts
Alura Scuba Team Suporte Educacional

Olá, Gabriel, tudo bem contigo?

O preventDefault está correto, é só um pequeno detalhe que está causando o recarregamento da página. Você adicionou o addEventListener ao botão de salvar corretamente, mas o problema acontece porque o botão de remover está sendo criado dinamicamente dentro da função salvar.

Então, quando o JavaScript é carregado, o botaoRemover ainda não existe na página, e por isso a página recarrega quando você clica nesse botão. Você pode mover a adição do evento click para o botão remover dentro da função salvar, assim o evento será adicionado sempre que o botão for criado.

O código corrigido fica assim:

function salvar(evento){
    evento.preventDefault();
    const tarefa = document.querySelector('.input-item');
    const container = document.querySelector('form');
    
    const divContainer = document.createElement('div');
    const buttonEditar = document.createElement('button');
    const buttonRemover = document.createElement('button');
    const paragrafo = document.createElement('p');
    const divButton = document.createElement('div');
    const createCheck = document.createElement('input');
    
    createCheck.type = 'checkbox';
    paragrafo.innerText = tarefa.value;
    buttonEditar.innerHTML = 'Editar Item';
    buttonRemover.innerHTML = 'Remover Item';
    createCheck.id = 'contador-' + contador++;
    divContainer.classList.add('div-tarefas');
    buttonRemover.classList.add('remover-botao');
    
    container.appendChild(divContainer);
    divContainer.appendChild(createCheck);
    divContainer.appendChild(paragrafo);
    divButton.appendChild(buttonEditar);
    divButton.appendChild(buttonRemover);
    divContainer.appendChild(divButton);

    /* Lembrando de mudar o nome de botaoRemover para 
    buttonRemover, que é como você criou o elemento, e de fazer
    o mesmo quando criar a função editar */

    buttonRemover.addEventListener('click', removerItem);
}

Qualquer outra dúvida, o fórum está à disposição. Sucesso no curso! Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado