Question

在我正在跟踪的教程中，辅导员在单击“添加任务”时使用警报框来验证空白文本字段，如果没有任务，则用户会收到警报以告知他们添加到任务中。我想修改此位，而不是要显示警报，而希望在已成功完成的文本字段下显示一条消息，但是我注意到这仍然为应用程序的“任务”部分添加了空白任务。 / p>

我试图调用removeTask（）函数，以便它删除空白任务，但这没有用，而且我觉得这是解决该问题的一种方法。

我试图在显示消息的if语句中添加else语句，并添加将填充“任务”部分的代码，但这还是行不通的。

不确定要尝试什么？

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

预期结果：

仅当新任务文本字段中未键入任何任务时，才显示消息；如果存在，则不应显示消息并添加任务。

实际结果：

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

请问您是否可以指导我完成操作以及是否需要提供更多信息或代码？

谢谢

导航

Answer 1

阅读了您的问题和JavaScript代码后，我了解到您在单击addTask按钮时正在调用带有某些文本的函数add。因此，我根据自己的理解准备了示例HTML。它类似于TODO列表应用程序。您可以运行以下代码段。

为什么遇到问题

因为您总是在检查值是否为初始值。如果值为initial，那么您将直接显示消息，并且在添加任务时也不会将其删除。

下面是我所做的更改

将错误文本移动到HTML代码，并将元素读取到一个全局变量addTaskErr中。最初将错误文本设置为隐藏，并且当value为空时，我通过将display设置为空来显示此文本。 addTaskErr.style.display = '';
作为第一步添加新任务时，我隐藏了错误文本 addTaskErr.style.display = 'none';
在准备列表元素时，我将事件侦听器添加到删除按钮以删除列表以及单击列表时。通过使用this.parentElement属性获取父元素来删除列表元素。
```
`link.addEventListener('click', function(e){
     this.parentElement.remove();
     e.preventDefault();
   });`
```

示例代码

    var taskInput = document.getElementById('taskInput'),
        taskList = document.getElementById('taskList'),
        addTaskErr = document.getElementById('addTaskError');
        //_localStorage = localStorage,
        //counter = 0;
        
    function addTask(e) {
      if(taskInput.value === '') {            
        addTaskErr.style.display = '';
      } else {
        addTaskErr.style.display = 'none';
        // 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 = '<span class="fa fa-remove">X</span>'
        // Append Link To li
        li.appendChild(link);
        
        link.addEventListener('click', function(e){
           this.parentElement.remove();
           //counter--;
           e.preventDefault();
        });
        //counter++;
        // 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();
    }

    function storeTaskInLocalStorage(value){
     
      /*_localStorage.setItem('tasks', JSON.stringify(taskLists));*/
    }

.fa.fa-remove{
  padding:4px 6px;
  border-radius:50%;
  background: #f2f2f2;
  color:red;
  margin-left:5px;
  float: right;
  position: absolute;
  right: 0;
}

li{
  height:30px;
  margin-bottom: 5px;
  border:1px solid #f5f5f5;
  position: relative;
  width: 300px;
}

    <div>
      <input type="text" id="taskInput"/>
      <button onclick="addTask(event)">Add</button>
    </div>
    <div>
      <span id="addTaskError" style="color:red; display:none;">
        Please enter a task
      </span>
    </div>
    <div>
      <ol id="taskList">
      </ol>
    </div>

即使字段为空，添加任务验证仍会添加一个空任务

1 个答案: