title: JavaScript runtime error: Unable to get property 'className' of undefined or null reference
body: <p>I'm trying to code an image slider into my website but I'm receiving this error whenever I try to debug: </p>
  
  <blockquote>
    <p>JavaScript runtime error: Unable to get property 'className' of
    undefined or null reference</p>
  </blockquote>
  
  <p>When I use chrome to inspect the elements, it shows a null reference for the className property of the project# div tags, yet I defined the class for each of these tags in the html code. I'm so lost, I don't understand what's causing the detection error. Your help will be much appreciated. All the relevant code is below. Thank you :)</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Tebello | Projects&lt;/title&gt;
  &lt;meta name="keywords" content="" /&gt;
  &lt;meta name="description" content="" /&gt;
      &lt;script src="script.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;link href="style.css" rel="stylesheet" /&gt;
      &lt;link href="default.css" rel="stylesheet" type="text/css" media="screen" /&gt;
  &lt;/head&gt;
  
  &lt;div id="slider"&gt;
      &lt;div id="wrapper"&gt;
          &lt;!--start slide 1 --&gt;
          &lt;div class="content" id="project1"&gt;
              &lt;img src="images/NumScram.png" /&gt;
              &lt;div class="text"&gt;
                  &lt;h3&gt;Project name&lt;/h3&gt;
                  &lt;p&gt;A short description of the project&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt; 
          &lt;!-- end slide1 --&gt;
  
          &lt;!--start slide 2 --&gt;
          &lt;div class="content" id="project2"&gt;
              &lt;img src="images/WebCalc.png" /&gt;
              &lt;div class="text"&gt;
                  &lt;h3&gt;Project name&lt;/h3&gt;
                  &lt;p&gt;A short description of the project&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt; 
          &lt;!--end slide2 --&gt;
  
          &lt;!--start slide 3 --&gt;
          &lt;div class="content" id="project3"&gt;
              &lt;div class="text"&gt;
                  &lt;h3&gt;Project name&lt;/h3&gt;
                  &lt;p&gt;A short description of the project&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt; 
           &lt;!--end slide3 --&gt;
      &lt;/div&gt;
      &lt;!--end wrapper--&gt;
  &lt;/div&gt;
  &lt;!--end slider--&gt;
  
  &lt;!--Start navlinks--&gt;
  &lt;div id="navlinks"&gt;
      &lt;ul&gt;
          &lt;li class="itemlinks" data-pos="0px"&gt;1&lt;/li&gt;
          &lt;li class="itemlinks" data-pos="-823px"&gt;2&lt;/li&gt;
          &lt;li class="itemlinks" data-pos="-1646px"&gt;3&lt;/li&gt;
          &lt;li class="itemlinks" data-pos="-2469px"&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;!--end navlinks--&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var links = document.querySelectorAll(".itemlinks");
  var wrapper = document.querySelector("#wrapper");
  
  for (var i = 0; i &lt; links.length; i++) {
      var link = links[i];
      link.addEventListener('click', setPosition, false);
  }
  
  addClass(links[0], "active");
  
  function setPosition(e) {
      removeActiveLinks();
  
      var clickedLink = e.target;
      addClass(clickedLink, "active");
  
      var position = clickedLink.getAttribute("data-pos");
      wrapper.style.left = position;
  }
  
  function removeActiveLinks() {
      for (var i = 0; i &lt; links.length; i++) {
          removeClass(links[i], "active");
      }
  }
  
  function addClass(element, classToAdd) {
      var currentClassValue = element.className;
  
      if (currentClassValue.indexOf(classToAdd) == -1) {
          if ((currentClassValue == null) || (currentClassValue === "")) {
              element.className = classToAdd;
          } else {
              element.className += " " + classToAdd;
          }
      }
  }
  
  function removeClass(element, classToRemove) {
      var currentClassValue = element.className;
  
      // removing a class value when there is more than one class value present
      // and the class you want to remove is not the first one
      if (currentClassValue.indexOf(" " + classToRemove) != -1) {
          element.className = element.className.replace(" " + classToRemove, "");
          return;
      }
  
      // removing the first class value when there is more than one class
      // value present
      if (currentClassValue.indexOf(classToRemove + " ") != -1) {
          element.className = element.className.replace(classToRemove + " ", "");
          return;
      }
  
      // removing the first class value when there is only one class value 
      // present
      if (currentClassValue.indexOf(classToRemove) != -1) {
          element.className = element.className.replace(classToRemove, "");
          return;
      }
  }
  </code></pre>