javascript - "Cannot read property 'classList' of null" when using classList.add -

i having error, since not familiar code. came theme in startbootstrap (creative). file

classie.js

code:

/*!  * classie - class helper functions  * bonzo https://github.com/ded/bonzo  *   * classie.has( elem, 'my-class' ) -> true/false  * classie.add( elem, 'my-new-class' )  * classie.remove( elem, 'my-unwanted-class' )  * classie.toggle( elem, 'my-class' )  */  /*jshint browser: true, strict: true, undef: true */ /*global define: false */  ( function( window ) {  'use strict';  // class helper functions bonzo https://github.com/ded/bonzo  function classreg( classname ) {   return new regexp("(^|\\s+)" + classname + "(\\s+|$)"); }  // classlist support class management // altho fair, api sucks because won't accept multiple classes @ once var hasclass, addclass, removeclass;  if ( 'classlist' in document.documentelement ) {   hasclass = function( elem, c ) {     return elem.classlist.contains( c );   };   addclass = function( elem, c ) {     elem.classlist.add( c );   };   removeclass = function( elem, c ) {     elem.classlist.remove( c );   }; } else {   hasclass = function( elem, c ) {     return classreg( c ).test( elem.classname );   };   addclass = function( elem, c ) {     if ( !hasclass( elem, c ) ) {       elem.classname = elem.classname + ' ' + c;     }   };   removeclass = function( elem, c ) {     elem.classname = elem.classname.replace( classreg( c ), ' ' );   }; }  function toggleclass( elem, c ) {   var fn = hasclass( elem, c ) ? removeclass : addclass;   fn( elem, c ); }  var classie = {   // full names   hasclass: hasclass,   addclass: addclass,   removeclass: removeclass,   toggleclass: toggleclass,   // short names   has: hasclass,   add: addclass,   remove: removeclass,   toggle: toggleclass };  // transport if ( typeof define === 'function' && define.amd ) {   // amd   define( classie ); } else {   // browser global   window.classie = classie; }  })( window ); 

the error in:

elem.classlist.add( c );

i not familiar code written. include file other js files. , seems other js file needs variable classie.

edited:

here error in console:

uncaught typeerror: cannot read property 'classlist' of null   addclass @ classie.js?nngrmm:33   scrollpage @ cbpanimatedheader.js?nngrmm:30 

also, have error in bootstrap.js.

uncaught typeerror: $(...).find(...).once not function   drupal.behaviors.bootstrap.attach @ bootstrap.js?nngrmm:16   (anonymous function) @ drupal.js?nngrmm:76   x.extend.each @ jquery.min.js?v=1.10.2:4   drupal.attachbehaviors @ drupal.js?nngrmm:74   (anonymous function) @ drupal.js?nngrmm:412   x.callbacks.c @ jquery.min.js?v=1.10.2:4   x.callbacks.p.firewith @ jquery.min.js?v=1.10.2:4   x.extend.ready @ jquery.min.js?v=1.10.2:4   q @ jquery.min.js?v=1.10.2:4 

somewhere in here:

/**  * @file  * bootstrap.js  *  * provides general enhancements , fixes bootstrap's js files.  */  var drupal = drupal || {};  (function($, drupal){   "use strict";    drupal.behaviors.bootstrap = {     attach: function(context) {       // provide bootstrap tab/drupal integration.       $(context).find('.tabbable').once('bootstrap-tabs', function () {         var $wrapper = $(this);         var $tabs = $wrapper.find('.nav-tabs');         var $content = $wrapper.find('.tab-content');         var borderradius = parseint($content.css('borderbottomrightradius'), 10);         var bootstraptabresize = function() {           if ($wrapper.hasclass('tabs-left') || $wrapper.hasclass('tabs-right')) {             $content.css('min-height', $tabs.outerheight());           }         };         // add min-height on content left , right tabs.         bootstraptabresize();         // detect tab switch.         if ($wrapper.hasclass('tabs-left') || $wrapper.hasclass('tabs-right')) {           $tabs.on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {             bootstraptabresize();             if ($wrapper.hasclass('tabs-left')) {               if ($(e.target).parent().is(':first-child')) {                 $content.css('bordertopleftradius', '0');               }               else {                 $content.css('bordertopleftradius', borderradius + 'px');               }             }             else {               if ($(e.target).parent().is(':first-child')) {                 $content.css('bordertoprightradius', '0');               }               else {                 $content.css('bordertoprightradius', borderradius + 'px');               }             }           });         }       });     }   }; 

error in:

$(context).find('.tabbable').once('bootstrap-tabs', function () {

need help. thanks.

i ran same issue today different theme , wanted post resolution others in future.

the issue cbpanimatedheader.js file. file defines "scrollpage" function, calls upon "classie" function. why seeing error classie.js file. in scrollpage function, variable "header" used:

if ( sy >= changeheaderon ) {         classie.add(header, 'navbar-shrink' );     }     else {         classie.remove(header, 'navbar-shrink' );     } 

however, header not being defined in way scrollpage function can read it. fix error, can either define header globally or within scrollpage function. chose copy variable definition function. here's final result in cbpanimatedheader.js:

function scrollpage() {     var sy = scrolly(),     header = document.queryselector( '.navbar-fixed-top' );     if ( sy >= changeheaderon ) {         classie.add(header, 'navbar-shrink' );     }     else {         classie.remove(header, 'navbar-shrink' );     }     didscroll = false; }