I'm working on a project that incorporates a drawer for navigation. When a toggle ('nav-drawer-toggle') is clicked, it opens the drawer and shifts the body over by the drawer's width.
However, I also want to apply the 'navigating' class to my footer (which has a <footer> tag) and my header (which has a <nav> tag). I've tried adding in getElementsByTagName('footer') and getElementsByTagName('nav'), but clearly did so improperly. How would I properly get those to work along with the currently-working getElementById('body')?
Now the footer works, but the header is still unchanged. Here's the updated code:
var checkbox = document.getElementById('nav-drawer-toggle');
var dashboard_body = document.getElementById('body');
var dashboard_header = document.getElementsByTagName('nav')[0];
var dashboard_footer = document.getElementsByTagName('footer')[0];
checkbox.onchange = function() {
if(this.checked) {
dashboard_body.className += 'navigating',
dashboard_header.className += 'navigating',
dashboard_footer.className += 'navigating';
} else {
dashboard_body.className = '',
dashboard_header.className = '',
dashboard_footer.className = '';
}
};
It all depends on your html. I'm guessing you might be having an issue in that getElementsByTagName and getElementsByClassName both return an HTMLCollection and not a single element node. So if you only have one <footer>, you can use getElementsByTagName('footer')[0] to get that footer to put the class on.