Javascript 添加任务验证仍然添加空任务，即使字段为空

在我正在学习的教程中，导师在单击“添加任务”时使用警报框验证空文本字段，如果没有任务，用户将收到警报，告知他们添加到任务中。我想修改这个abit，而不是一个警报，我想让一条消息出现在我已经成功完成的文本字段下，但是我注意到这仍然会在我的应用程序的“任务”部分添加一个空白任务

我曾尝试调用ReaveTask*（）函数，以便它移除空白任务，但这不起作用，而且我觉得这是解决这个问题的一个HACKEY方法。p> 我曾尝试向显示消息的if语句添加else语句，并添加填充“Tasks”部分的代码，但这也不起作用

不知道还可以尝试什么

// ADD TASK FUNCTION

// addTask Function Creation
function addTask(e) {
  if(taskInput.value === '') {
    //alert('Add a Task');
    const addTaskErr = document.getElementById('addTaskError');
    addTaskErr.style.color = 'red';
    addTaskErr.innerHTML = 'Please add a task';
  } else {
    // Creat li Element
    const li = document.createElement('li');
    // Add class
    li.className = 'collection-item';
    // Create Text Node and Append to li
    li.appendChild(document.createTextNode(taskInput.value));
    // Create new link element
    const link = document.createElement('a');
    // Add Class
    link.className = 'delete-item secondary-content';
    // Add Icon HTML
    link.innerHTML = '<i class="fa fa-remove"></i>'
    // Append Link To li
    li.appendChild(link);

    // Append li to ul
    taskList.appendChild(li);

    //console.log(li);

    // Store task in Local Storage
    storeTaskInLocalStorage(taskInput.value);

    // Clear The Input
    taskInput.value = '';
  }
  e.preventDefault();
}

//添加任务函数
//addTask函数创建
函数addTask（e）{
如果（taskInput.value==''）{
//警报（“添加任务”）；
const addTaskErr=document.getElementById（'addTaskError'）；
addTaskErr.style.color='red'；
addTaskErr.innerHTML='请添加任务'；
}否则{
//创造李元素
const li=document.createElement（'li'）；
//添加类
li.className='收集项目'；
//创建文本节点并附加到li
li.appendChild（document.createTextNode（taskInput.value））；
//创建新的链接元素
const link=document.createElement（'a'）；
//添加类
link.className='删除项目次要内容'；
//添加图标HTML
link.innerHTML=“”
//将链接附加到li
李.儿童(链接);；
//将li附加到ul
任务列表。追加子项（li）；
//控制台日志（li）；
//将任务存储在本地存储器中
storeTaskInLocalStorage（taskInput.value）；
//清除输入
taskInput.value=''；
}
e、 预防默认值（）；
}

预期结果：

只有在“新建任务”文本字段中没有键入任务时，才应显示消息，如果有，则不应显示消息并添加任务

实际结果：

即使“新建任务”文本字段为空，单击“添加任务”仍会将新的空白任务添加到我的应用程序的“任务”部分

请你指导我如何做，如果我需要提供任何进一步的信息或代码

谢谢

---

Nav

在阅读了您的问题和javascript代码后，我了解到当单击

add

按钮时，您正在使用一些文本调用函数

addTask

。因此，根据我的理解，我准备了示例

HTML

。它类似于

TODO

列表应用程序。您可以运行下面的代码段

您为什么会遇到问题

因为您总是检查值是否为初始值。若值为初始值，则直接显示消息，并且在添加任务时不删除它

以下是我所做的更改

将错误文本移动到HTML代码中，并将元素读入一个全局变量

addTaskErr

。最初错误文本设置为隐藏，当值为空时，我通过将

display

设置为空来显示此文本。

addTaskErr.style.display=''

当新任务作为初始步骤添加时，我将隐藏错误文本

addTaskErr.style.display='none'

在准备list元素时，我将事件侦听器添加到delete按钮，以删除列表，并在单击时删除。通过使用

this.parentElement

属性获取父元素来删除列表元素

`link.addEventListener('click', function(e){
     this.parentElement.remove();
     e.preventDefault();
   });`

示例代码

var taskInput=document.getElementById（'taskInput'），
taskList=document.getElementById（'taskList'），
addTaskError=document.getElementById（'addTaskError'）；
//_localStorage=localStorage，
//计数器=0；
函数addTask（e）{
如果（taskInput.value==''）{
addTaskErr.style.display=''；
}否则{
addTaskErr.style.display='none'；
//创造李元素
const li=document.createElement（'li'）；
//添加类
li.className='收集项目'；
//创建文本节点并附加到li
li.appendChild（document.createTextNode（taskInput.value））；
//创建新的链接元素
const link=document.createElement（'a'）；
//添加类
link.className='删除项目次要内容'；
//添加图标HTML
link.innerHTML='X'
//将链接附加到li
李.儿童(链接);；
link.addEventListener（'click'，函数（e）{
这个.parentElement.remove（）；
//计数器--；
e、 预防默认值（）；
});
//计数器++；
//将li附加到ul
任务列表。追加子项（li）；
//控制台日志（li）；
//将任务存储在本地存储器中
storeTaskInLocalStorage（taskInput.value）；
//清除输入
taskInput.value=''；
}
e、 预防默认值（）；
}
函数存储TaskInLocalStorage（值）{
/*_setItem（'tasks'，JSON.stringify（taskLists））*/
}

.fa.fa-remove{
填充：4px6px；
边界半径：50%；
背景#f2f2；
颜色：红色；
左边距：5px；
浮动：对；
位置：绝对位置；
右：0；
}
李{
高度：30px；
边缘底部：5px；
边框：1px实心#F5；
位置：相对位置；
宽度：300px；
}

添加
请输入一个任务

在阅读了您的问题和javascript代码后，我了解到，当单击

添加

按钮时，您正在使用一些文本调用函数

添加任务

。因此，根据我的理解，我准备了示例

HTML

。它类似于

TODO

列表应用程序。您可以运行下面的代码段

您为什么会遇到问题