0

Olá, estou tentando desenvolver uma to do list, confesso que estou apanhando um pouco hahaha. Estou seguindo um tutorial gringo e parei em uma parte muito chata.
Adicionei uma form, coloquei um input para escrever a tarefa, e no botão eu coloquei um alert com o EventListener só para ver se tava funcionando, e toda vez que eu aperto o botão, a pagina recarrega. Já tentei o preventDefault() e Stoppropagation e nada, alguém poderia me elucidar?
Não liguem para o CSS todo cagado, eu realmente to começando hahahahha.

<header>
<h1>
    Vitor's to do
</h1>
<form>
    <input type="text" class="todo-input">
    <button class="todo-button" type="submit">
        <!-- o type originalmente é submit, mas vou mudar para button apra
          parar de dar refresh na pagina, se der algum problema la na frente
          é isso que eu mudei!!!!!!!!!!!-->
        <i class="fas fa-plus-square"> </i>
    </button>
</form>
    <div class="todo-container">
        <ul class="todo-list">  
        </ul>
    </div>
</header>

/SELECTORS
const todoInput = document.querySelector('.todo-input')
const todoButton = document.querySelector('.todo-button').addEventListener('submit', addTodo)
const todoList = document.querySelector('.todo-list')
//Evente Listeners
//todoButton.addEventListener('submit', addTodo)
//Functions
function addTodo(event){
    event.preventDefault();
    window.alert('testing')
}

1 Resposta 1

0

O evento está no local errado, o evento submit é do formulário (</form>), então, busque o formulário que no caso exemplo eu coloquei uma classe todo-form (<form class="todo-form">), para adicionar o evento:

const todoInput = document.querySelector('.todo-input')
const todoButton = document.querySelector('.todo-button')
const todoForm = document.querySelector('.todo-form');
todoForm.addEventListener('submit', addTodo)
const todoList = document.querySelector('.todo-list')
function addTodo(event) {  
  event.preventDefault();
  window.alert('testing')
}
<form class="todo-form">
  <input type="text" class="todo-input">
  <button class="todo-button" type="submit">      
        Enviar
    </button>
</form>
<div class="todo-container">
  <ul class="todo-list">
  </ul>
</div>

2
  • Obrigado cara, me ajudou muito!!!!!!!!!!
    – Vitor G
    28/08/2020 às 0:06
  • @VitorG assinale como resposta do seu post!
    – novic
    28/08/2020 às 0:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .