0

Я использую такую конструкцию:

const $ = document.querySelector.bind(document);

Как правильно привязать обработчик, если элемент не был найден на странице?

$('#my_id').onclick = function() {

};

Чтобы не возникало ошибки:

Uncaught TypeError: Cannot set properties of null (setting 'onclick')

8
  • 1
    if ($('#my_id')) { ... }, $('...')?.onclick = ...
    – entithat
    4 окт 2021 в 8:58
  • $('#my_id')?.onclick = function() { }; так можно попробовать, вставить оператор опциональной последовательности
    – Alexandr
    4 окт 2021 в 9:01
  • 1
    @entithat @Александр-Родин $('#my_id')?.onclick вызывает ошибку Uncaught SyntaxError: Invalid left-hand side in assignment
    – WayMax
    4 окт 2021 в 9:05
  • 1
    learn.javascript.ru/optional-chaining вот пример использования в чистом js, в jquery не силен document.querySelector('#myID')?.addEventListener('click' , ()=>{}) - вот так вроде работает
    – Alexandr
    4 окт 2021 в 9:10
  • Используйте лучше if
    – entithat
    4 окт 2021 в 9:10

3 ответа 3

1

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

function $(selector) {
  return document.querySelector(selector) || document.createElement('div');
}


$('#test-1').addEventListener('click', () => console.log(0));
$('#test-2').addEventListener('click', () => console.log(0));
<button id="test-1"> Click </button>

Но таким «молчаливым» подходом рискуете пропустить ошибку, если вдруг элемент должен был быть на странице, но его нет. Т.е. можно делать две функции, одну назвать $, пусть дает ошибку если элемента нет, вторую как-то по другому, чтобы использовать только там, где ожидается отсутствие элемента.

1
  • спасибо за ответ. Что-то редко стал отвечать. Мне нравились всегда твои ответы. 2 ноя 2021 в 6:38
0

Можно реализовать с помощью оператора опциональной последовательности

document.querySelector('#my_id')?.addEventListener('click' , ()=>{
   [код обработки]
})
0

window.$ = el => new Proxy({
  el: (el instanceof HTMLElement) ? el : document.querySelector(el), 
}, { 
   get(target, prop) {
     return target.el?.[prop]; 
   }, 
   set(target, prop, value) {
    if (target.el instanceof HTMLElement)           // присваивание по условию
      target.el[prop] = value; 
    return true; 
  }, 
});

$('#not-exist').onclick = () => console.log('💩');  // ошибки нет
$('#my-id').onclick = () => console.log('💥'); 
<button id="my-id">👾</button>

1
  • Спасибо, это выглядит сложно. Постараюсь разобраться.
    – WayMax
    4 окт 2021 в 12:59

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.