title: Dynamically Switching CSS Files
body: <p>I get two error messages when trying to load the page with the code below. The error messages are:</p>
  
  <ol>
  <li>"Uncaught TypeError: Cannot set property 'href' of null at HTMLAnchorElement.col.(anonymous function).onclick (<a href="http://www.jimbrink.org/:363:17" rel="nofollow noreferrer">http://www.jimbrink.org/:363:17</a>)"</li>
  <li>"Uncaught ReferenceError: bindEvents is not defined at (index):375"</li>
  </ol>
  
  <p>I'm trying to create a link that, when clicked, would switch to another css file (with different fonts).</p>
  
  <p>(BONUS QUESTION: Is there a way for the link to toggle between the two stylesheets?)</p>
  
  <p>I've taken this from another StackOverflow question, but I can't seem to get the code to work my situation.</p>
  
  <p>Here's the link:</p>
  
  <pre><code>                &lt;li&gt;&lt;a href="#" class="changeStyle" data-style="css/style.comicsans.css" data-type="text/css" data-rel="stylesheet"&gt;JB's Fav Font&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>Here's the js function from the bottom of the page:</p>
  
  <pre><code>&lt;!-- cssswitcher js --&gt;
  &lt;script type='text/javascript'&gt;
  window.onload = function bindEvents(){
  
    var css=document.getElementById('style');
    var col=document.querySelectorAll('a.changeStyle');
  
    /* iterate through collection and assign listener */
    for( var n in col )if( col[n].nodeType==1 ) col[n].onclick=function(e){
      e.preventDefault();/* prevent jumping to top of page etc */
      var el=typeof(e.target)!='undefined' ? e.target : e.srcElement;
  
      /* assign style attributes */
      css.href=el.dataset.style;
      css.rel=el.dataset.rel;
      css.type=el.dataset.type;
  
      /* store reference to style selected in localstorage */
      localStorage.setItem( 'style', el.dataset.style );
      };
  
    /* if there is a reference to the user's css choice in storage, assign it */
    if( localStorage.getItem( 'style' )!=null ) css.href=localStorage.getItem( 'style' );
    }
  
    document.addEventListener( 'DOMContentLoaded', bindEvents, false );
  &lt;/script&gt;
  </code></pre>