'e.preventDefault() is not working for submit event in JavaScript [duplicate]

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);

});

javascripthtmleventsdom-eventsform-submit


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions