не может установить свойство onclick of null

Question

Я собираюсь с некоторым простым ванильным JS сегодня и зададим вопрос о событии onclick.

Может быть, лучше просто показать код:

function _(x) { 
    return document.querySelector(x); 
} 
function toggleSlide(el, maxH) { 
    var target = _(el); 
    if(target.style.height == null || target.style.height == maxH+"px") { 
     target.style.transition = "height 0.3s linear 0s"; 
     target.style.height = "0px"; 
    }else { 
     target.style.transition = "height 0.3s linear 0s"; 
     target.style.height = maxH+"px"; 
    } 
} 

Все работает, если я добавить событие OnClick для кнопки, как:

<button id="menu-btn" onclick="toggleSlide('#menu', 280)">Toggle</button> 

Но я получаю ошибку,

"connot set property" onclick "of null"

Когда я пытаюсь так:

_('#menu-btn').onclick = function() { 
    toggleSlide('#menu', 280) 
} 

Как я могу получить доступ к своей функции переключения без добавления OnClick в HTML?

Answer 1

Вы пытаетесь добавить слушателя до того, как кнопка существует. Либо поставить код проблемы в отдельный <script> после кнопки или в onload (предпочтительнее, см. Код ниже).

window.onload = function() { 
    _("#menu").onclick = function() { 
     toggleSlide('#menu', 280); 
    }; 
}; 

EDIT: Обратите внимание, что если у вас есть несколько из них, они должны быть помещены в одной и той же функции onload, или последний будет, прежде чем отвергнуть те.