时间戳

首页 > 解决方案 > 不添加任何价值 li 自动创建

javascript - 不添加任何价值 li 自动创建

问题描述

我正在尝试创建一个普通的用户界面，因为我正在添加一些任务，在那些我设置 taskInput 没有任何值作为警报（'请添加任务'）; 但即使没有在 taskInput 中添加任何值，它也会在 Dom 中显示为列表项。

下面是我的简单表单，即使我们在 taskInput 中没有任何内容，它也会提醒添加任务，但它再次执行了一个空列表项。

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(); 
}

标签： javascriptdom

解决方案

如果您不想在值为空的情况下创建列表项，则应在警报之后返回：

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

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

推荐阅读