附加项目立即删除

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

  //...

});

附加项目立即删除

Appended item is instantly removed

javascript

event-listener

appendchild