无需添加任何值 li 自动创建

Question

我正在尝试创建一个普通的ui，为此我正在添加一些任务， 在那些我被设置的任务输入没有任何值作为警报("请添加任务"(; 但它即使没有在任务输入中添加任何值，它也在 Dom. 中显示为列表项。

下面是我的简单表单，即使我们在 taskInput 中什么都不放，它也会提醒添加任务，但它再次执行 empt 列表项。

const form = document.querySelector('#task-form');
const filter = document.querySelector('#filter');
const taskList = document.querySelector('.collection');
const taskInput = document.querySelector('#task');
const clearBtn = document.querySelector('.clear-tasks');
function loadEventListeners(){
form.addEventListener('submit', addTask);
taskList.addEventListener('click', removeTask);
clearBtn.addEventListener('click',clearTasks);
filter.addEventListener('keyup', filterLi)
}
function addTask(e){
if(taskInput.value ===''){
alert('Please Add Task');
}
const li = document.createElement('li');
li.className = 'collection-item';
li.appendChild(document.createTextNode(taskInput.value));
const link = document.createElement('a');
link.className = 'delete-item secondary-content';
link.innerHTML = '<i class="fa fa-remove"></i>'
li.appendChild(link);
taskList.appendChild(li);
taskInput.value="";
e.preventDefault(); 
}

Answer 1

如果不想在值为空时创建列表项，则应在警报后返回：

if(taskInput.value ===''){
alert('Please Add Task');
return;
}

否则，它将发出警报，然后继续创建空列表项。