Добавленный элемент мгновенно удаляется

Question

Я пытаюсь понять основы EventListeners, я создал простую форму, где я просто хочу добавить значение ввода в UL, однако, когда я добавляю значение, я могу видеть его в списке на короткую секунду, а потом мгновенно удаляется, не могу понять почему, кто-нибудь может помочь?

const submitButton = document.querySelector('#add-task-btn');
const clearButton = document.querySelector('#remove-task-btn');
const item = document.querySelector('#task');
const taskList = document.querySelector('.collection');

allEventListeners();

function allEventListeners(){

    submitButton.addEventListener('click', function(){

        if (item.value === ''){
            alert('Please add a task')
        };

        const li = document.createElement('li');
        li.appendChild(document.createTextNode(item.value));

        taskList.appendChild(li);

        item.value = "";

    })
}

Answer 1

Вам просто нужно предоставить параметр события для вашей функции-обработчика и затем вызвать preventDefault()

submitButton.addEventListener('click', function(ev){
  ev.preventDefault(); // prevent the page submit

  //...

});