Parece que tengo un problema con el evento de envío, sigue actualizándose cada vez que presiono Intro o hago clic en enviar. Enlace al sitio donde se puede ver el problema. Estoy usando preventDefault(); función para detener la actualización que funciona si el tipo de lista de eventos es hacer clic pero no en el evento de envío. Enlace a los archivos .
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);});