Как вызвать проверку на ширину экрана при клике?

Question

[MashutaKlencheva]

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

window.addEventListener('DOMContentLoaded', function() {

  const openSearch = document.querySelector('#open-search');

  const inputSearch = document.querySelector('#input-search');

  const closeSearch = document.querySelector('#close-search');

//эта функция вставлена ради проверки  и она выдает ошибку Uncaught ReferenceError: documentElement is not defined
    at tada

 window.addEventListener("resize", tada);

 function tada() {
   const viW = Math.max(documentElement.clientWidth, window.innerWidth || 0);
   if (viW <= 1023) console.log('tada')
 };

 tada();

  openSearch.addEventListener('click', function() {
    openSearch.setAttribute('type', 'submit');
    inputSearch.classList.remove('input-collapsed');
    closeSearch.classList.remove('search-form__close');
  });

  closeSearch.addEventListener('click', function() {
    inputSearch.classList.add('input-collapsed');
    closeSearch.classList.add('search-form__close');
  });
});

Вопрос - почему не срабатывает такая функция, и как ее грамотно поместить в событие при клике?

Answer 1

[goshaLoonny]

Вы ни в одном обработчике не используете this, но при этом используете function, а не стрелочные функции. Но проблема не в этом, просто озвучил.

window.addEventListener('DOMContentLoaded', () => {
  const openSearch = document.querySelector('#open-search');
  const inputSearch = document.querySelector('#input-search');
  const closeSearch = document.querySelector('#close-search');

  window.addEventListener('resize', () => {
    const viW = Math.max(
      document.documentElement.clientWidth,
      window.innerWidth || 0
    );

    if (viW <= 1023) console.log('tada')
  });
  window.dispatchEvent(new Event('resize')); // Это эмулирует событие

  openSearch.addEventListener('click', () => {
    openSearch.setAttribute('type', 'submit');
    inputSearch.classList.remove('input-collapsed');
    closeSearch.classList.remove('search-form__close');
  });

  closeSearch.addEventListener('click', () => {
    inputSearch.classList.add('input-collapsed');
    closeSearch.classList.add('search-form__close');
  });
})

Ошибка была в том что вы обращались к переменной documentElement, а нужно было document.documentElement

Comments

[MashutaKlencheva]

Я имею самое общее представление о языке, а задачу решить надо. Поэтому такие общие конструкции использую, стрелочные просто не знаю...) Ваш пример прописывает tada в консоли именно тогда, когда нужно! Мой же - постоянно, при любых условиях.

Подскажите, как теперь ввести функцию при клике на openSearch? Можно ли просто вставить данную функцию внутрь обработчика событий?

[goshaLoonny]

MashutaKlencheva, Не понял что нужно сделать. Имеется ввиду функция tada?

[MashutaKlencheva]

Или может наоборот - если true - снова обработчик событий при клике на кнопку, и затем нужное действие с элементом, который необходимо скрыть?

[goshaLoonny]

MashutaKlencheva, я не понимаю что вам нужно сделать

[MashutaKlencheva]

goshaLoonny, спасибо, что откликаетесь) Смотрите. Мне нужно чтобы функция tada запускала проверку при клике на кнопку openSearch. Не просто проверяла, а проверяла при клике. Если условие истинно, someelement нужно скрыть. если нет - не делать ничего.

[goshaLoonny]

MashutaKlencheva, Если вы говорите про бывшую функцию tada, то вы просто можете эмулировать это событие где вам необходимо и функция будет выполнятся window.dispatchEvent(new Event('resize'));

[MashutaKlencheva]

MashutaKlencheva, грубо говоря, если ширина экрана менее или равно 1023, я должна найти и скрыть некоторые элементы навигации именно при клике на openSearch.

[MashutaKlencheva]

goshaLoonny, если я задаю нужные мне действия - элементы скрываются и не при клике.

window.addEventListener('resize', () => {
const viW = Math.max(
document.documentElement.clientWidth,
window.innerWidth || 0
);
// что происходит, когда условие верно

if (viW <= 1023) {
burger.style.display="none";
logo.style.display="none";
}
});


openSearch.addEventListener('click', () => {
openSearch.setAttribute('type', 'submit');
inputSearch.classList.remove('input-collapsed');
closeSearch.classList.remove('search-form__close');
window.dispatchEvent(new Event('resize')); // Это эмулирует событие
});

все же правильно?

[goshaLoonny]

MashutaKlencheva, подождите, вам нужно что бы выполнялось два разных сценария по одному условию?
То есть при изменение разрешения выполнялось одно, а при клике другое?

[MashutaKlencheva]

goshaLoonny, нужно, чтобы при клике проверялось изменение разрешения, и если условие верно, (ширина менее или равна 1023) скрывались элементы burger и logo именно при клике на openSearch.

window.addEventListener('DOMContentLoaded', () => {
const openSearch = document.querySelector('#open-search');
const inputSearch = document.querySelector('#input-search');
const closeSearch = document.querySelector('#close-search');

const burger = document.querySelector('.menu__button');
const logo = document.querySelector('.header__logo');

window.addEventListener('resize', () => {
const viW = Math.max(
document.documentElement.clientWidth,
window.innerWidth || 0
);

if (viW <= 1023) {
burger.style.display="none";
logo.style.display="none";
}
});


openSearch.addEventListener('click', () => {
openSearch.setAttribute('type', 'submit');
inputSearch.classList.remove('input-collapsed');
closeSearch.classList.remove('search-form__close');
window.dispatchEvent(new Event('resize')); // Это эмулирует событие
});

// при клике на закрытие элемента поиска лого и бургер возвращаются обратно

closeSearch.addEventListener('click', () => {
inputSearch.classList.add('input-collapsed');
closeSearch.classList.add('search-form__close');
burger.style.display="block";
logo.style.display="block";
});
})

[Сергей delphinpro]

MashutaKlencheva,

именно при клике на openSearch.

ну а почему вы тогда просто в самом обработчике клика это не проверите?

function width() {
  return Math.max(
    document.documentElement.clientWidth, 
    window.innerWidth || 0
  );
}

'click', () => {
  if (width() <= 1023) {
  } else {
  }
}

[MashutaKlencheva]

Сергей delphinpro, не знала, как правильно написать, чтобы работало. Спасибо.

[goshaLoonny]

Сергей delphinpro, ПОЧЕМУ ВЫ ВСЕ ИГНОРИРУЕТЕ СТРЕЛОЧНЫЕ ФУНКЦИИ?????
извращенцы

[Сергей delphinpro]

goshaLoonny, а что за странный фетиш на стрелочные функции? Там где они помогают, использую.

[goshaLoonny]

Сергей delphinpro, это не фетиш. А вот использовать function там где он не нужен это реально фетиш. Зачем вы компилятор обременяет созданием контекста, области видимости отдельной и тд.?