javascript - 附加的项目被立即删除

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 = "";

    })
}

标签： javascriptevent-listenerappendchild

Answer 1

您只需要为您的处理函数提供一个事件参数，然后调用preventDefault()

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

  //...

});