Каким образом можно вернуть placeholder? TypeError: event is undefined

220

20 декабря 2018, 18:30

Написал простенький скрипт для создания placeholder'a у select элементов. Выдает ошибку

TypeError: event is undefined

Попробовал в слушателе событий обернуть функцию, которая реагирует на событие, обернуть в анонимную функцию и передать основной объект событий, не помогло, в чем проблема может быть?

И следующий вопрос, как можно вернуть placeholder на место, если пользователь ничего не выбрал, а просто убрал фокус с элемента? Интересует конкретно, как отловить тот момент, что пользователь ничего не выбрал?

function SelectPlaceholder(options) { 
 
  this.select = document.querySelectorAll(options.selectSelector); 
  this.styleClass = options.placeholderStyleClass; 
 
  self = this; 
 
  this.deletePlaceholder = function(event) { 
    var currentElement = event.target; 
    var placeholderChild = currentElement.querySelector(options.placeholderSelector); 
 
    if (placeholderChild) { 
      currentElement.removeChild(placeholderChild); 
    } 
 
  } 
 
  (function() { 
    for (var i = 0; i < self.select.length; i++) { 
      self.select[i].classList.add(self.styleClass); 
    } 
  }()); 
 
  for (var i = 0; i < this.select.length; i++) { 
    this.select[i].addEventListener('focus', function() { 
      self.deletePlaceholder(event) 
    }); 
  } 
 
 
} 
 
new SelectPlaceholder({ 
  selectSelector: '.field-line__select', 
  placeholderSelector: '.field-line__select-placeholder', 
  placeholderStyleClass: 'selectplaceholder-field', 
});

<select class="field-line__select"> 
  <option value="" class="field-line__select-placeholder">Открыть список улиц</option> 
  <option value="1">1</option> 
  <option value="2">2</option> 
</select>

Answer 1

this.select[i].addEventListener('focus', function(event) { // !!!
  self.deletePlaceholder(event)
});
//(function() {
  for (var i = 0; i < self.select.length; i++) {
    self.select[i].classList.add(self.styleClass);
  }
//}());

пользователь ... убрал фокус с элемента

addEventListener.('blur', ...

Answer 2

Не совсем понятно при наведение на что у Вас должен срабатывать placeholder. Как я понял при наведение на select. Как вариант:

 let select = document.getElementsByClassName('field-line__select');
    select[0].addEventListener('mouseenter', function (e) { 
      //тут работаем с элементом.
      console.log(e.target)
    })