title: Uncaught TypeError: Cannot read property 'classList' of null
body: <p>I'm working on a simple web app and I receive the above error. Would you guys please lend me a hand? </p>
  
  <p>app.js: </p>
  
  <pre><code>var movieApp = movieApp || {};
  
  (function () {
  movieApp.controller = {
      init:function() {
          movieApp.router.init();
          movieApp.section.init();
      }
  };
  
  movieApp.router = {
      init:function() {
          routie({
              '/about': function() {
                  movieApp.section.toggle('section[data-route="about"]');
              },              
              '/movies': function() {
                  movieApp.section.toggle('section[data-route="movies"]');
              },
              ' ': function() {
                  movieApp.section.toggle('section[data-route="about"]');
              },  
          });
      }
  };
  
  movieApp.content = {
      about: {
          title: "About this app",
          description: "...",
      },
  
      movies: [
          {
              title: "Shawshank Redemption",
              releaseDate: "14 October 1994",
              description: "Two imprisoned men bond over a number of years, finding solace and eventual redemption through acts of common decency.",
              cover: "../WebApp/static/images/shawshank-redemption.jpg"
          },
          {
              title: "The Godfather",
              releaseDate:"24 March 1972",
              description:"The aging patriarch of an organized crime dynasty transfers control of his clandestine empire to his reluctant son.",
              cover: "../WebApp/static/images/the-godfather.jpg"
          },
          {
              title: "Pulp Fiction",
              releaseDate: "14 October 1994",
              description: "The lives of two mob hit men, a boxer, a gangster's wife, and a pair of diner bandits intertwine in four tales of violence and redemption.",
              cover: "../WebApp/static/images/pulp-fiction.jpg"
          },
          {
              title: "The Dark Knight",
              releaseDate: "18 July 2008",
              description: "When Batman, Gordon and Harvey Dent launch an assault on the mob, they let the clown out of the box, the Joker, bent on turning Gotham on itself and bringing any heroes down to his level.",
              cover: "../WebApp/static/images/the-dark-knight.jpg"
          }
      ]
  };
  
  movieApp.section = {
      init:function() {
          this.about();
          this.movies();
      },
  
      about:function() {
          var aboutSection = {
              'title': movieApp.content.about.title,
              'description': movieApp.content.about.description
          };
  
          Transparency.render(document.querySelector('section[data-route="about"]'),aboutSection);
      },
  
      movies:function() {
          var moviesSection = {
              'header': "Favorite Movies",
              'movies': movieApp.content.movies
          }
  
          // dit zorgt ervoor dat de src van img tag veranderd naar wat er staat in this.cover
          var directives = {
              movies: {
                  cover: {
                      src: function(params){
                          return this.cover
                      }
                  }
              }
          }
  
          Transparency.render(document.querySelector('section[data-route="movies"]'),moviesSection, directives);
      },
  
      toggle:function(section) {
          section = typeof section !== 'undefined' ? section : 'section[data-route="about"]';
          document.querySelector(section).classList.toggle('active');
      }
  };
  
  movieApp.controller.init();
  
  })();
  </code></pre>
  
  <p>The html file looks like this: </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Movies Web App&lt;/title&gt;
      &lt;link rel="stylesheet" href="static/stylesheets/main.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#/about"&gt;About&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#/movies"&gt;Movies&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/header&gt;
  
      &lt;main id="content"&gt;
  
          &lt;section data-route="about"&gt;
              &lt;header&gt;
                  &lt;h1 data-bind="title"&gt;&lt;/h1&gt;
                  &lt;p data-bind="description"&gt;&lt;/p&gt;
              &lt;/header&gt;
          &lt;/section&gt;
  
          &lt;section data-route="movies"&gt;
              &lt;h1 data-bind="header"&gt;&lt;/h1&gt;    
              &lt;div data-bind="movies"&gt;
                  &lt;article data-bind="movie"&gt;
                      &lt;header&gt;
                          &lt;h1 data-bind="title"&gt;&lt;/h1&gt;
                          &lt;em&gt;&lt;time data-bind="releaseDate"&gt;&lt;/time&gt;&lt;/em&gt;
                      &lt;/header&gt;
                      &lt;figure&gt;
                          &lt;img data-bind="cover" src="" alt=""&gt;
                      &lt;/figure&gt;
                      &lt;p data-bind="description"&gt;&lt;/p&gt;
                  &lt;/article&gt;
              &lt;/div&gt;
          &lt;/section&gt;
      &lt;/main&gt;
  
      &lt;script src="static/js/lib/routie.js"&gt;&lt;/script&gt;
      &lt;script src="static/js/lib/transparency.js"&gt;&lt;/script&gt;
      &lt;script src="static/js/app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When I run the index page, I get the following error: Uncaught TypeError: Cannot read property 'classList' of null.</p>
  
  <p>Thanks for the help. </p>