Клик срабатывает, а почему клик вне формы- не срабатывает?

Question

[olya_097]

речь о кнопке поиска
https://jsfiddle.net/deo8ba9z/

Upd: имелось ввиду что по клику вне формы- инпут должен закрываться

Answer 1

[Пашенька]

<button type="button"></button>

var searchBtn = document.querySelector('.main-header__button'),
		searchInput = searchBtn.querySelector('.main-header__input'),
		menu = document.querySelector('.main-header__menu');

searchBtn.onclick = function(event) {
			searchInput.classList.add('main-header__input_active')
			searchInput.focus()
			this.classList.add('main-header__button_active')
			menu.classList.add('hidden')
}

searchInput.onblur = function(event) {
  this.classList.remove('main-header__input_active')
  this.parentNode.classList.remove('main-header__button_active')
  menu.classList.remove('hidden')
}

Answer 2

[Alfieros]

Держи, то что просила.

Comments

[olya_097]

Alfieros, имелось ввиду по клику вне формы- закрывается инпут

[Alfieros]

olya_097, в ответе полное решение.

[olya_097]

Alfieros, спасибо
а в чем была ошибка?

[Пашенька]

olya_097, мда... у меня самый быстрый и лаконичный код в данном случае, но дело ваше, так сказать. Пишите дальше свой жуйквери.

[olya_097]

like-a-boss, та не
ваш код тоже хорош
спасибо
в другом месте использую
просто именно в этом проекте от меня потребовали именно жуквери сделать)

[Alfieros]

olya_097, сравните код, вроде всё понятно.

[olya_097]

Alfieros, та к я не спорю
ваш код хорош

[Alfieros]

olya_097, я не о красоте кода. Если вы свой код писали сами, надеюсь чуток должны понимать что вы там писали?

[olya_097]

Alfieros, ну да
я его понимаю
а в чем вопрос то?

[Alfieros]

olya_097, напишите лучше в телегу, там объясню.

Answer 3

[Максим]

А на нативном js можно ?
Просто меньше писать и работает так же ... https://codepen.io/topicstarter/pen/NVpjdO
Пришлось попросить помощи так как не силён в js но изучаю его : https://ru.stackoverflow.com/a/981964/330688