Having trouble implementing a full screen menu, no Rails errors but not working when project is run. Error received:
Cannot read property 'addEventListener' of null
JS code snippet:
(function() {
var Menu = (function() {
var burger = document.querySelector('.burger');
var menu = document.querySelector('.menu');
var menuList = document.querySelector('.menu__list');
var brand = document.querySelector('.menu__brand');
var menuItems = document.querySelectorAll('.menu__item');
var active = false;
var toggleMenu = function() {
if (!active) {
menu.classList.add('menu--active');
menuList.classList.add('menu__list--active');
brand.classList.add('menu__brand--active');
burger.classList.add('burger--close');
for (var i = 0, ii = menuItems.length; i < ii; i++) {
menuItems[i].classList.add('menu__item--active');
}
active = true;
} else {
menu.classList.remove('menu--active');
menuList.classList.remove('menu__list--active');
brand.classList.remove('menu__brand--active');
burger.classList.remove('burger--close');
for (var i = 0, ii = menuItems.length; i < ii; i++) {
menuItems[i].classList.remove('menu__item--active');
}
active = false;
}
};
var bindActions = function() {
**burger.addEventListener('click', toggleMenu, false);**
};
var init = function() {
bindActions();
};
return {
init: init
};
}());
Menu.init();
}());
New to using vanilla - any extra steps needed to use it in Rails? (via 'require' or something? built-in? Thanks!
HTML code snippet:
<!DOCTYPE html>
<head>
<title>AaP</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<div class="header">
<h1>ASHLEIGH</font> <font color=#f6f6f6>/</font> <font color=#fbe2d4>ALMEIDA</font></h1>
<div class="burger">
<div class="burger__patty"></div>
<div class="burger__patty"></div>
<div class="burger__patty"></div>
</div>
<nav class="menu">
<div class="menu__brand">x
<a href=""><div class="logo"></div></a>
</div>
<ul class="menu__list">
<li class="menu__item"><a href="" class="menu__link">About</a></li>
<li class="menu__item"><a href="" class="menu__link">Work</a></li>
<li class="menu__item"><a href="" class="menu__link">Contact</a></li>
<li class="menu__item">
x</i></a>
</li>
<li class="menu__item">
x
<i class="fa fa-dribbble"></i></a>
</li>
</ul>
</nav>
</div>