Способы устранения ошибки, возникающей при отсутствии элемента

Question

У меня есть кнопка на странице. Но есть он не всегда, а при определённых условиях, заданных на бэкенде. И, соответственно, когда элемента нет, то возникает ошибка: Uncaught TypeError: document.querySelector(...) is null.

Постепенно я пришёл к двум способам решения проблемы.

Классический (недостатки: дополнительная переменная, дополнительная вложенность)

const button = document.querySelector('#showmore');
if (button)
{
  button.onclick = function() { 
      ...
  }
}

Экзотический (недостатки: создание лишнего пустого объекта)

(document.querySelector('#showmore') || {}).onclick = function() {
  ...
}

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

Answer 1

Если версия Chrome ^80

document.querySelector('button[b1]')?.addEventListener('click', () => {
  console.log('b1')
})

// ошибку не должен выдать
try {
  document.querySelector('button[b2]')?.addEventListener('click', () => {
    console.log('b2')
  })
} catch (e) {
  console.log(e)
}

<button b1>button</button>
<!-- <button b2>button</button> -->

К тому же на подходе babel-plugin-proposal-optional-chaining

БЛОГ НА HUSL

Способы устранения ошибки, возникающей при отсутствии элемента

Ответы (1 шт):