Как в JavaScript привязать событие по нажатию клавиши Esc на два разных элемента?

Question

[kepkame]

Всем привет!

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

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

document.addEventListener('keydown', function (e) {
    if(e.keyCode === 27) var element = document.getElementById("popupClinet");
    element.classList.remove("popup--open");
});
document.addEventListener('keydown', function (e) {
    if(e.keyCode === 27) var element = document.getElementById("popupPartner");
    element.classList.remove("popup--open");
});

Answer 1

[0xD34F]

Вместо того, чтобы пытаться получать отдельные элементы (кстати, возможно, несуществующие - где проверка, что элемент действительно нашёлся?), можно сочинить селектор, соответствующий всем элементам, получить коллекцию и перебрать её. Что это может быть за селектор? - да селектор по классу, который надо удалить. Вот так всё просто получается:

const className = 'popup--open';

document.addEventListener('keydown', e => {
  if (e.key === 'Escape') {
    document.querySelectorAll(`.${className}`).forEach(n => {
      n.classList.remove(className);
    });
  }
});

Answer 2

[Александр Аксентьев]

Если попапы одновременно могут быть открыты, то надо вешать keydown на сам попап, а не на весь документ.

А если открыт всегда только какой-то один, то какая разница сработают оба кода или нет? Он же не закроет закрытый попап еще сильнее.

Comments

[kepkame]

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

Uncaught TypeError: Cannot read property 'classList' of undefined at HTMLDocument.

[Александр Аксентьев]

kepkame, потому что надо проверять существует ли вообще такой элемент

if(element) { удалить класс }