Блог

В учебном пособии, за которым я слежу, преподаватель использует окно предупреждения для проверки пустого текстового поля при нажатии «Добавить задачу», если задачи нет, пользователь получает предупреждение, чтобы сообщить им о добавлении в задачу. Я хотел изменить эту функцию, и вместо предупреждения я хотел, чтобы под текстовым полем отображалось сообщение, которое я успешно выполнил, однако я заметил, что это по-прежнему добавляет пустую задачу в раздел «Задачи» моего приложения.

Я попытался вызвать функцию removeTask(), чтобы она удалила пустую задачу, но это не сработало, и я чувствую, что это простой способ решить эту проблему.

Я попытался добавить оператор else в оператор if, который представляет сообщение, и добавить код, который будет заполнять раздел «Задачи», но это тоже не сработало

Не уверен, что еще попробовать?

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

Ожидаемый результат:

Оно должно отображать сообщение только в том случае, если в текстовом поле новой задачи не введено задание, и если оно есть, оно не должно представлять сообщение и добавлять задачу.

Фактические результаты:

Даже если текстовое поле новой задачи оставлено пустым, новая пустая задача по-прежнему добавляется в раздел «Задача» моего приложения при нажатии «Добавить задачу».

Пожалуйста, не могли бы вы рассказать мне, как это будет сделано, и если мне нужно предоставить какую-либо дополнительную информацию или код?

Спасибо

Навигация

Прочитав ваш вопрос и код javascript, я понял, что вы вызываете функцию addTask с некоторым текстом при add нажатии кнопки. Итак, я подготовил образец HTML , основанный на моем понимании. Это похоже на приложение TODO списка. Вы можете запустить приведенный ниже фрагмент.

Почему у вас возникает проблема

Потому что вы всегда проверяете, является ли значение начальным или нет. Если значение начальное, то вы напрямую показываете сообщение, а также не удаляете его при добавлении задачи.

Ниже приведены изменения, которые я сделал

1. Переместил текст ошибки в HTML-код и прочитал элемент в одну глобальную переменную addTaskErr . Изначально текст ошибки имеет значение скрытый, а когда значение пустое, я показываю этот текст, установив значение display пустой. addTaskErr.style.display = '';

2. Когда новая задача добавляется в качестве начального шага, я скрываю текст ошибки addTaskErr.style.display = 'none';

3. При подготовке элемента списка я добавляю прослушиватель событий к кнопке удаления, чтобы удалить список и при его нажатии. Удаление элемента списка путем получения родительского элемента с помощью 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>