@dmitriu256

Как выполнить append только один раз?

Суть вопроса как добавить элемент через "append" только один раз?
Простое поле ввода, если ввели данные - то данные выводим в консоль.
Если input пуст - и нажимаем ентер - выводиться ошибка, что поле пустое и в DOM добавляется строка (p с классом .error).
При повторном нажатии ентер новое сообщение об ошибке не создавать оставить предыдущее. Сейчас при нажатии ентера постоянно отрабатывает append.
Как устранить?

var form = document.forms.mess;

var msg = form.username;

form.addEventListener('submit', function(e){
   e.preventDefault();

msg.addEventListener('keydown', function(e){

     if(e.keyCode === 13) {
        if (this.value !== '') {
           console.log(this.value);
           this.value = '';
        } else {
              alert('Пустое поле - заполните его!');
//////////////////////////////////////////////////////////////////
/*Как в данном месте вывести append только один раз */
           var error = document.createElement('p');

                 error.innerHTML = 'Ошибка ввода!';
                 error.className = 'error';
                 form.append(error);
                 form.previousElementSibling.remove('error');
        }

     }
});
});
  • Вопрос задан
  • 1030 просмотров
Решения вопроса 1
usyninis
@usyninis
react-эксперт
var form = document.forms.mess;
var show = false; // флаг показа ошибки
var msg = form.username;

form.addEventListener('submit', function(e){
   e.preventDefault();

msg.addEventListener('keydown', function(e){

     if(e.keyCode === 13) {
        if (this.value !== '') {
           console.log(this.value); 
           this.value = '';
           show = false; // тут надо удалить блок с ошибкой и выключить флаг
        } else {
              alert('Пустое поле - заполните его!');
              if (show) return; // если уже показана, то ничего не делаем
              show = true; // включаем флаг о том что показано сообщение
              var error = document.createElement('p');

                 error.innerHTML = 'Ошибка ввода!';
                 error.className = 'error';
                 form.append(error);
                 form.previousElementSibling.remove('error');
        }

     }
});
});
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Stalker_RED
@Stalker_RED
Перед созданием проверяйте не создан ли он уже.
Вариант с флагом, как Иван Иван рекомендует, тоже нормальный.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы