0

I seem to have a problem with submit event, it keeps refreshing whenever I press enter, or click submit. Link to the site where you can see the problem. I am using preventDefault(); function to stop the refresh which works if the event lister type is click but doesn't on submit event. Link to the files.

HTML

<body>
<header>
  <h1>My TODO List</h1>
</header>

<form>
  <input type="text" class="todo-input" />
  <button class="todo-button" type="submit">
    <i class="bi bi-plus-square-fill"></i>
  </button>
</form>

<div class="todo-wrapper">
    <ul class="todo-list">
        <div class="todo"></div>
    </ul>
</div>

<script src="sandbox.js"></script>

JavaScript

const todoInput = document.querySelector('.todo-input');

const todoButton = document.querySelector('.todo-button');

const todoList = document.querySelector('.todo-list');

todoButton.addEventListener('submit', e => {
e.preventDefault();

const todoDiv = document.createElement('div');
todoDiv.classList.add('todo-items');
const newTask = document.createElement('li');
newTask.textContent ='Test';
newTask.classList.add('task');
todoDiv.appendChild(newTask);

const finishButton = document.createElement('button')
finishButton.innerHTML = '<i class="bi bi-check2"></i>';
finishButton.classList.add('finish-button');
todoDiv.appendChild(finishButton);

const deleteButton = document.createElement('button')
deleteButton.innerHTML = '<i class="bi bi-trash-fill"></i>';
deleteButton.classList.add('delete-button');
todoDiv.appendChild(deleteButton);

});

Hritik Jaiswal
  • 11
  • 1
  • 1
    Buttons do not dispatch a `submit` event. You can only submit forms, not buttons. – Sebastian Simon Mar 15 '22 at 10:27
  • `button` elements don't have a `submit` event, that's a `form` event. So you'd hook it on your form, not your button. But if you **never** want the button to submit the form, change `type="submit"` to `type="button"`. (Also note that there's no need for `type="submit"` on `button` elements if you want them to be submit buttons, their default type is `"submit"` [sadly].) – T.J. Crowder Mar 15 '22 at 10:27

0 Answers0