dom - Applying A Class In Multiple Places Using Javascript -

dom - Applying A Class In Multiple Places Using Javascript -

background

i'm working on project incorporates drawer navigation. when toggle ('nav-drawer-toggle') clicked, opens drawer , shifts body on drawer's width.

the issue

however, want apply 'navigating' class footer (which has <footer> tag) , header (which has <nav> tag). i've tried adding in getelementsbytagname('footer') , getelementsbytagname('nav'), did improperly. how work along currently-working getelementbyid('body')?

update

now footer works, header still unchanged. here's 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 depends on html. i'm guessing might having issue in getelementsbytagname , getelementsbyclassname both homecoming htmlcollection , not single element node. if have 1 <footer>, can utilize getelementsbytagname('footer')[0] footer set class on.

javascript dom classname