ハンバーガーメニュの実装

Question

Error : Unable to get property 'addEventListener' of undefined or null reference
上記のJavascriptエラーが表示されハンバーガーメニュを実装したいのですが実装できません。
`

<header class="header"> <nav class="global-nav"> <ul class="global-nav__list"> <li class="global-nav__item"><a href="">メニュー1</a></li> <li class="global-nav__item"><a href="">メニュー2</a></li> <li class="global-nav__item"><a href="">メニュー3</a></li> <li class="global-nav__item"><a href="">メニュー4</a></li> <li class="global-nav__item"><a href="">メニュー5</a></li> </ul> </nav> <div class="hamburger" id="js-hamburger"> <span class="hamburger__line hamburger__line--1"></span> <span class="hamburger__line hamburger__line--2"></span> <span class="hamburger__line hamburger__line--3"></span> </div> <div class="black-bg" id="js-black-bg"></div> </header> ``` ```Javascript function toggleNav() { var body = document.body; var hamburger = document.getElementById('js-hamburger'); var blackBg = document.getElementById('js-black-bg');

hamburger.addEventListener('click', function() {
body.classList.toggle('nav-open');
});
blackBg.addEventListener('click', function() {
body.classList.remove('nav-open');
});
}
toggleNav();

Answer 1

script要素を</body>の手前に持っていってみてください。